Recipe.elm

module Recipe exposing ( .. )

import Html exposing ( .. )
import Html.Attributes exposing ( class, id )
import Html.Events exposing ( onClick, onMouseEnter, onMouseLeave )

import Material
import Material.Scheme
import Material.Card as Card
import Material.Options as Options exposing ( cs, css )
import Material.Textfield as Textfield
import Material.Elevation as Elevation
--import Material.Button as Button


-- MODEL


type alias Model =
  { id : Int
  , mdl : Material.Model
  , raised : Int
  }


init =
  { id = 0
  , mdl = Material.model
  , raised = -1
  }



-- UPDATE


type Msg
  = Raise Int
  | AddWork
  | Mdl ( Material.Msg Msg )


update msg model =
  case msg of
    Raise k ->
      ( { model | raised = k }, Cmd.none )

    AddWork ->
      ( model, Cmd.none )

    Mdl msg' ->
      Material.update msg' model



---- VEIW


--view : (Msg -> m) -> Model -> Html m
view lift model =
  let
    k = 12
  in
    div [ id "content" ]
      [ Card.view
        [ css "width" "300px"
        --, Color.background (Color.color Color.Brown Color.S500)
        -- Elevation
        , if model.raised == k then Elevation.e8 else Elevation.e2
        , Elevation.transition 250
        , Options.attribute <| onMouseEnter ( lift ( Raise k ) )
        , Options.attribute <| onMouseLeave ( lift ( Raise -1 ) )
        ]
        [ Card.title
            [ css "flex-direction" "column"
            , css "height" "200px"
            , css "background" "url('assets/recipes/lg304.jpg') center / cover"
            ]
            [ Card.head [] [ text "Edit Recipe" ]
            ]
        , Card.actions []
          [ div [ class "js-recipe" ]
            [ Textfield.render Mdl [ 0 ] model.mdl
              [ Textfield.label "Title"
              , Textfield.floatingLabel
              ]
            , Textfield.render Mdl [ 1 ] model.mdl
              [ Textfield.label "Author"
              , Textfield.floatingLabel
              ]
            , Textfield.render Mdl [ 2 ] model.mdl
              [ Textfield.label "Introduction"
              , Textfield.floatingLabel
              , Textfield.textarea
              , Textfield.rows 6
              ]
            ]
          ]
        ]
      ]