module View.Login exposing (viewLogin)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Types.Model exposing (Model)
import Types.Msg exposing (Msg(..))


viewLogin : Model -> Html Msg
viewLogin model =
    section [ class "section" ]
        [ div [ class "container" ]
            [ div [ class "columns is-centered" ]
                [ div [ class "column is-5-tablet is-4-desktop is-3-widescreen" ]
                    [ div [ class "box" ]
                        [ h1 [ class "title has-text-centered" ] [ text "Zeiterfassung Login" ]
                        , div [ class "field" ]
                            [ label [ class "label" ] [ text "Benutzername" ]
                            , div [ class "control" ]
                                [ input
                                    [ class "input"
                                    , type_ "text"
                                    , placeholder "Benutzername"
                                    , value model.username
                                    , onInput UpdateUsername
                                    ]
                                    []
                                ]
                            ]
                        , div [ class "field" ]
                            [ label [ class "label" ] [ text "Passwort" ]
                            , div [ class "control" ]
                                [ input
                                    [ class "input"
                                    , type_ "password"
                                    , placeholder "Passwort"
                                    , value model.password
                                    , onInput UpdatePassword
                                    ]
                                    []
                                ]
                            ]
                        , div [ class "field" ]
                            [ div [ class "control" ]
                                [ button
                                    [ class "button is-primary is-fullwidth"
                                    , onClick Login
                                    ]
                                    [ text "Anmelden" ]
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ]