let input id label attrs =
  H.div
    [| HA.class_ "g-Form__Field" |]
    [| H.div
        [| HA.class_ "g-Form__Label" |]
        [| H.label
          [| HA.for_ id |]
          [| H.text label |]
        |]
    ;  H.input
        (HA.concat attrs [| HA.id id |])
        [| |]
    |]

let color_input default_colors id label init_value on_input =
  let
    input =
      H.input
          [| HA.id id
          ;  HE.on_input (fun e -> on_input (Element.value (Event.target e)))
          ;  HA.value init_value
          ;  HA.type_ "color"
          |]
          [| |]
  in
  H.div
    [| HA.class_ "g-Form__Field" |]
    [| H.div
        [| HA.class_ "g-Form__Label" |]
        [| H.label
          [| HA.for_ id |]
          [| H.text label |]
        |]
    ;  Layout.line
        [| |]
        (default_colors
          |> Js.Array.map (fun color ->
              Button.raw
                [| HA.class_ "g-Form__DefaultColor"
                ;  HA.style ("background-color: " ^ color)
                ;  HE.on_click (fun _ ->
                    let () = Element.set_value input color in
                    on_input color)
                ;  HA.type_ "button"
                |]
                [| |])
        |> Fun.flip Js.Array.concat [| input |])
    |]

let textarea id label init_value on_input =
  H.div
    [| HA.class_ "g-Form__Field" |]
    [| H.div
        [| HA.class_ "g-Form__Label" |]
        [| H.label
          [| HA.for_ id |]
          [| H.text label |]
        |]
    ;  H.textarea
        [| HA.id id
        ;  HA.class_ "g-Form__Textarea"
        ;  HE.on_input (fun e -> on_input (Element.value (Event.target e)))
        |]
        [| H.text init_value |]
    |]