module Bulma exposing (..)

{-

   Helper to style with Bulma.css

-}

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Svg.Attributes



-- ICONS


icon : { icon : String, size : Maybe String, ratio : Maybe String } -> Html msg
icon params =
    span [ class <| "icon " ++ Maybe.withDefault "" params.size ]
        [ i [ Svg.Attributes.class <| params.icon ++ " " ++ Maybe.withDefault "" params.ratio ] [] ]



-- BUTTONS


btn : msg -> { text : String, icon : String, color : String } -> Html msg
btn msg params =
    button
        [ class <| "button " ++ params.color
        , onClick msg
        ]
        [ icon { icon = params.icon, size = Nothing, ratio = Nothing }
        , p [] [ text params.text ]
        ]


buttons btns =
    div [ class "buttons level-item" ] btns


confirmButtons confirm cancel =
    buttons [ confirmBtn confirm, cancelBtn cancel ]


confirmBtn msg =
    btn msg { text = "Ok", icon = "fas fa-check", color = "is-primary" }


cancelBtn msg =
    btn msg { text = "Annuler", icon = "fas fa-times", color = "is-danger" }



-- TABLES
--


datatable headers rows =
    table [ class "table is-fullwidth is-striped" ]
        [ thead [ class "table-header" ] <|
            List.map
                (\header -> th [] [ text header ])
                headers
        , tbody [] rows
        ]



-- Section