<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    HH.div
      [ P.classes (ClassName <$> ["card-body"]) ]
      [ HH.form_
        [
          HH.div
            [ P.classes (ClassName <$> ["form-group"]) ]
            [ HH.label [ P.for "billableName" ] [ HH.text "Bill Name:" ]
            , HH.input
              [ P.type_ P.InputText
              , P.classes (ClassName <$> [ "form-control" ])
              , P.id_ "billableName"
              , P.placeholder "A name for the product or service you want to bill for"
              , P.required true
              , P.autofocus true
              , E.onValueInput (Just <<< SetName)
              ]
            , HH.label [ P.for "billableDesc" ] [ HH.text "Bill Description:" ]
            , HH.input
              [ P.type_ P.InputText
              , P.classes (ClassName <$> [ "form-control" ])
              , P.id_ "billableDesc"
              , P.placeholder "Description of the product or service"
              , P.required true
              , P.autofocus true
              , E.onValueInput (Just <<< SetDesc)
              ]

    HH.form_
      [ HH.div
        [ P.classes (ClassName <$> ["form-group"]) ]
        [ HH.label 
          [ P.for "billableName", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]
          [ HH.text "Bill Name:" ] 
        , HH.input
          [ P.type_ P.InputText
          , P.classes (ClassName <$> [ "form-control-sm" ])
          , P.id_ "billableName"
          , P.placeholder "A name for the product or service you want to bill for"
          , P.required true
          , P.autofocus true
          , E.onValueInput (Just <<< SetName)
          ]
        , HH.label 
            [ P.for "billableDesc", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]
            [ HH.text "Bill Description:" ] 
        , HH.input
            [ P.type_ P.InputText
            , P.classes (ClassName <$> [ "form-control-sm" ])
            , P.id_ "billableDesc"
            , P.placeholder "Description of the product or service"
            , P.required true
            , P.autofocus true
            , E.onValueInput (Just <<< SetDesc)

        , HH.label 
            [ P.for "billableMsg", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]
            [ HH.text "Message to be included with bill:" ] 
        , HH.input
            [ P.type_ P.InputText
            , P.classes (ClassName <$> [ "form-control-sm" ])
            , P.id_ "billableMsg"
            , P.placeholder "Description of the product or service"
            , P.required true
            , P.autofocus true
            , E.onValueInput (Just <<< SetDesc)
            ]

  colmd :: forall a s. Int -> Array (H.ComponentHTML a s m) -> H.ComponentHTML a s m
  colmd i xs = HH.div [ P.classes (ClassName <$> [ "col-md-" <> show i ]) ] xs

import Data.Time.Duration (Hours(..))

-- import Data.Time.Duration (Hours(..))

import Halogen.HTML.Events as E

-- import Halogen.HTML.Events as E

import Aftok.Modals as Modals

              case st.selectedProject of

              (case st.selectedProject of

                  [ HH.slot
                      _createBillable
                      unit
                      (Create.component system caps.createBillable)
                      (unwrap p).projectId
                      (Just <<< BillableCreated)

                  [ Modals.modalButton "createBillable" "Create billable"
                  , Modals.modal "createBillable" "Create Billable"
                    [ HH.slot
                        _createBillable
                        unit
                        (Create.component system caps.createBillable)
                        (unwrap p).projectId
                        (Just <<< BillableCreated)
                    ]

              )

module Aftok.HTML.Classes where
import Halogen.HTML.Core (ClassName(..))
btn :: ClassName 
btn = ClassName "btn"
btnPrimary :: ClassName 
btnPrimary = ClassName "btn-primary"
btnSecondary :: ClassName 
btnSecondary = ClassName "btn-secondary"
close :: ClassName 
close = ClassName "close"
fade :: ClassName
fade = ClassName "fade"
show :: ClassName
show = ClassName "show"
modal :: ClassName
modal = ClassName "modal"
modalBody :: ClassName
modalBody = ClassName "modal-body"
modalContent :: ClassName
modalContent = ClassName "modal-content"
modalDialog :: ClassName
modalDialog = ClassName "modal-dialog"
modalHeader :: ClassName
modalHeader = ClassName "modal-header"
modalFooter :: ClassName
modalFooter = ClassName "modal-footer"
modalTitle :: ClassName
modalTitle = ClassName "modal-title"

module Aftok.HTML.Properties where
import Halogen.HTML.Core (AttrName(..))
import Halogen.HTML.Properties (IProp, attr)
dataToggle :: forall r i. String -> IProp r i
dataToggle = attr (AttrName "data-toggle")
dataTarget :: forall r i. String -> IProp r i
dataTarget = attr (AttrName "data-target")
dataDismiss :: forall r i. String -> IProp r i
dataDismiss = attr (AttrName "data-dismiss")

module Aftok.HTML where

module Aftok.Modals where
import Prelude ((<>), negate)
import DOM.HTML.Indexed.ButtonType (ButtonType(..))
import Halogen.HTML as HH
import Halogen.HTML.Properties as P
import Halogen.HTML.Properties.ARIA as ARIA
import Aftok.HTML.Classes as C
import Aftok.HTML.Properties as AP
modalButton :: forall w i. String -> String -> HH.HTML w i
modalButton target text =
  HH.button
    [ P.classes [ C.btn, C.btnPrimary ]
    , AP.dataToggle "modal"
    , AP.dataTarget ("#" <> target)
    , P.type_ ButtonButton
    ]
    [ HH.text text ]
modal :: forall w i. String -> String -> Array (HH.HTML w i) -> HH.HTML w i
modal modalId title contents =
  HH.div
    [ P.classes [ C.modal ]
    , P.id_ modalId
    , P.tabIndex (negate 1)
    , ARIA.role "dialog"
    , ARIA.labelledBy (modalId <> "Title")
    , ARIA.hidden "true"
    ]
    [ HH.div
      [ P.classes [C.modalDialog], ARIA.role "document" ]
      [ HH.div
        [ P.classes [C.modalContent] ]
        [ HH.div
          [ P.classes [C.modalHeader] ]
          [ HH.h5 [P.classes [C.modalTitle], P.id_ (modalId <>"Title") ] [HH.text title]
          , HH.button
            [ P.classes [ C.close ]
            , AP.dataDismiss "modal"
            , ARIA.label "Close"
            , P.type_ ButtonButton
            ]
            [ HH.span [ARIA.hidden "true"] [HH.text "&times;"]]
          ]
        , HH.div
          [ P.classes [C.modalBody] ]
          contents
        , HH.div
          [ P.classes [C.modalFooter] ]
          [ HH.button
            [ P.type_ ButtonButton
            , P.classes [ C.btn, C.btnSecondary]
            , AP.dataDismiss "modal"
            ]
            [ HH.text "Close" ]
          , HH.button
            [ P.type_ ButtonButton
            , P.classes [ C.btn, C.btnPrimary ]
            ]
            [ HH.text "Save changes"]
          ]
        ]
      ]
    ]