section [ class "row" ]
    [ form [ class "form mt-2 col-3" ]
        [ h4 []
            [ text "Init" ]
        , fieldset []
            [ h5 []
                [ text "Telescope status" ]
            , div [ class "mt-2 row" ]
                [ label [ class "col-2 col-form-label", for "dome" ]
                    [ text "Status" ]
                , div [ class "btn-group col" ]
                    [ button [ class "btn btn-outline-primary col-2", type_ "button" ]
                        [ text "Unpark            " ]
                    , button [ class "btn btn-outline-secondary col-2", type_ "button" ]
                        [ text "Park            " ]
                    ]
                ]
            , div [ class "mt-2 row" ]
                [ label [ class "col-2 col-form-label", for "cover" ]
                    [ text "Cover" ]
                , div [ class "btn-group col" ]
                    [ button [ class "btn btn-outline-primary col-2", type_ "button" ]
                        [ text "Open            " ]
                    , button [ class "btn btn-outline-secondary col-2", type_ "button" ]
                        [ text "Close            " ]
                    ]
                ]
            , div [ class "row" ]
                [ small [ class "col-2 form-text" ]
                    []
                , small [ class "col text-success" ]
                    [ text "status: "
                    , var []
                        [ text "unparked" ]
                    ]
                , small [ class "col text-danger" ]
                    [ text "cover: "
                    , var []
                        [ text "error" ]
                    ]
                ]
            , div [ class "mt-2 row" ]
                [ label [ class "col-2 col-form-label", for "error" ]
                    [ text "Error" ]
                , div [ class "btn-group col" ]
                    [ button [ class "btn btn-outline-primary", type_ "button" ]
                        [ text "Clear            " ]
                    ]
                ]
            , h5 [ class "mt-2" ]
                [ text "Telescope offsets" ]
            , div [ class "row mt-2" ]
                [ label [ class "col-1 col-form-label", for "zdoffset" ]
                    [ text "ZD" ]
                , label [ class "col-1 col-form-label", for "azoffset" ]
                    [ text "Alt" ]
                , div [ class "form-group col" ]
                    [ div [ class "input-group" ]
                        [ input [ class "form-control", id "zdoffset", max "300.00", min "-300.00", name "zdoffset", placeholder "0.00", type_ "number" ]
                            []
                        , input [ class "form-control", id "azoffset", max "300.00", min "-300.00", name "azoffset", placeholder "0.00", type_ "number" ]
                            []
                        , span [ class "input-group-text" ]
                            [ text "''              " ]
                        ]
                    ]
                ]
            , div [ class "row mt-2" ]
                [ label [ class "col-2 col-form-label", for "derot" ]
                    [ text "Rot" ]
                , div [ class "form-group col" ]
                    [ div [ class "input-group" ]
                        [ input [ class "form-control", id "derot", max "359.99", min "0.00", name "derot", placeholder "0.00", type_ "number" ]
                            []
                        , span [ class "input-group-text" ]
                            [ text "°              " ]
                        ]
                    ]
                ]
            , div [ class "row" ]
                [ small [ class "col-2 form-text" ]
                    []
                , small [ class "col text-success" ]
                    [ text "zd: "
                    , var []
                        [ text "0.0" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "az: "
                    , var []
                        [ text "0.0" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "rot: "
                    , var []
                        [ text "0" ]
                    ]
                ]
            , h5 []
                [ text "Dome" ]
            , div [ class "mt-2 row" ]
                [ label [ class "col-2 col-form-label", for "dome" ]
                    [ text "Az" ]
                , div [ class "form-group col" ]
                    [ div [ class "input-group" ]
                        [ input [ class "form-control", id "dome", max "359.99", min "0.00", placeholder "0.00", type_ "number" ]
                            []
                        , span [ class "input-group-text" ]
                            [ text "°              " ]
                        ]
                    ]
                , div [ class "btn-group col" ]
                    [ button [ class "btn btn-outline-primary", type_ "button" ]
                        [ text "sync            " ]
                    , button [ class "btn btn-outline-primary", type_ "button" ]
                        [ text "park            " ]
                    ]
                ]
            , div [ class "mt-2 row" ]
                [ label [ class "col-2 col-form-label", for "shutter" ]
                    [ text "Shutter" ]
                , div [ class "btn-group col" ]
                    [ button [ class "btn btn-outline-primary", type_ "button" ]
                        [ text "open            " ]
                    , button [ class "btn btn-outline-secondary", type_ "button" ]
                        [ text "close            " ]
                    ]
                ]
            , div [ class "row" ]
                [ small [ class "col-2 form-text" ]
                    []
                , small [ class "col text-success" ]
                    [ text "az: "
                    , var []
                        [ text "0.0" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "open: "
                    , var []
                        [ text "False" ]
                    ]
                ]
            , h5 []
                [ text "Camera" ]
            , div [ class "mt-2 row" ]
                [ label [ class "col-2 col-form-label", for "temperature" ]
                    [ text "Cool" ]
                , div [ class "form-group col" ]
                    [ div [ class "input-group" ]
                        [ span [ class "input-group-text" ]
                            [ input [ class "form-check-input mt-0", type_ "checkbox" ]
                                []
                            ]
                        , input [ class "form-control", id "temperature", max "0", type_ "number", value "-20.0" ]
                            []
                        , span [ class "input-group-text" ]
                            [ text "C              " ]
                        ]
                    ]
                , div [ class "btn-group col-3" ]
                    [ button [ class "btn btn-outline-secondary", type_ "button" ]
                        [ text "warm            " ]
                    ]
                ]
            , div [ class "row" ]
                [ small [ class "col-2 text-secondary" ]
                    []
                , small [ class "col text-success" ]
                    [ text "fan: "
                    , var []
                        [ text "50%" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "T: "
                    , var []
                        [ text "-21.1" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "amb: "
                    , var []
                        [ text "11.0" ]
                    ]
                ]
            ]
        ]
    , form [ class "form mt-2 col-4" ]
        [ h4 []
            [ text "Control panel" ]
        , fieldset []
            [ h5 []
                [ text "Telescope" ]
            , nav []
                [ ul [ class "nav nav-tabs", attribute "role" "tablist" ]
                    [ li [ class "nav-item", attribute "role" "presentation" ]
                        [ button [ class "nav-link active", attribute "data-bs-target" "#radec_tab", attribute "data-bs-toggle" "tab", attribute "role" "tab", type_ "button" ]
                            [ text "Ra Dec" ]
                        ]
                    , li [ class "nav-item", attribute "role" "presentation" ]
                        [ button [ class "nav-link", attribute "data-bs-target" "#altaz_tab", attribute "data-bs-toggle" "tab", attribute "role" "tab", type_ "button" ]
                            [ text "Alt Az" ]
                        ]
                    ]
                ]
            , div [ class "tab-content" ]
                [ div [ class "tab-pane show active", id "radec_tab", attribute "role" "tabpanel" ]
                    [ div [ class "row mt-2" ]
                        [ label [ class "col-1 col-form-label", for "alpha" ]
                            [ text "α" ]
                        , label [ class "col-1 col-form-label", for "delta" ]
                            [ text "δ" ]
                        , div [ class "col input-group" ]
                            [ input [ class "form-control", id "alpha", name "alpha", placeholder "00 00 00.0" ]
                                []
                            , input [ class "form-control", id "delta", name "delta", placeholder "+00 00 00.0" ]
                                []
                            , span [ class "input-group-text" ]
                                [ text "hms                  dms                " ]
                            ]
                        ]
                    ]
                , div [ class "tab-pane", id "altaz_tab", attribute "role" "tabpanel" ]
                    [ div [ class "row mt-2" ]
                        [ label [ class "col-1 col-form-label", for "altitude" ]
                            [ text "Alt" ]
                        , label [ class "col-1 col-form-label", for "azimuth" ]
                            [ text "Az" ]
                        , div [ class "col input-group" ]
                            [ input [ class "form-control", id "altitude", max "85.00", min "10.00", name "altitude", placeholder "45.00", type_ "number" ]
                                []
                            , input [ class "form-control", id "azimuth", max "359.99", min "0.00", name "azimuth", placeholder "0.00", type_ "number" ]
                                []
                            , span [ class "input-group-text" ]
                                [ text "°                " ]
                            ]
                        ]
                    ]
                ]
            , div [ class "row mt-2" ]
                [ small [ class "col-2 form-text text-secondary" ]
                    []
                , div [ class "btn-group col", attribute "role" "group" ]
                    [ input [ attribute "autocomplete" "off", class "btn-check", id "btnradio1", name "btnradio", type_ "radio" ]
                        []
                    , label [ class "btn btn btn-outline-primary", for "btnradio1" ]
                        [ text "Check" ]
                    , input [ attribute "autocomplete" "off", class "btn-check", id "btnradio2", name "btnradio", type_ "radio" ]
                        []
                    , label [ class "btn btn btn-outline-primary", for "btnradio2" ]
                        [ text "Slew" ]
                    , input [ attribute "autocomplete" "off", class "btn-check", id "btnradio3", name "btnradio", type_ "radio" ]
                        []
                    , label [ class "btn btn btn-outline-secondary", for "btnradio3" ]
                        [ text "Stop" ]
                    ]
                ]
            , div [ class "row" ]
                [ small [ class "col-2 form-text text-secondary" ]
                    []
                , small [ class "col form-text text-success" ]
                    [ text "α: "
                    , var []
                        [ text "00 00 00.0" ]
                    ]
                , small [ class "col form-text text-success" ]
                    [ text "δ: "
                    , var []
                        [ text "+00 00 00.0" ]
                    ]
                , small [ class "col form-text text-success" ]
                    [ text "ha: "
                    , var []
                        [ text "+00 00 00.0" ]
                    ]
                ]
            , div [ class "row" ]
                [ small [ class "col-2 form-text text-secondary" ]
                    []
                , small [ class "col form-text text-success" ]
                    [ text "alt: "
                    , var []
                        [ text "45.00" ]
                    ]
                , small [ class "col form-text text-success" ]
                    [ text "az: "
                    , var []
                        [ text "50.00" ]
                    ]
                , small [ class "col form-text text-secondary" ]
                    [ text "lst: "
                    , var []
                        [ text "00 00 00.0" ]
                    ]
                ]
            , div [ class "mt-2 row" ]
                [ label [ class "col-2 col-form-label", for "dome" ]
                    [ text "Dome" ]
                , div [ class "form-group col-4" ]
                    [ div [ class "input-group" ]
                        [ span [ class "input-group-text" ]
                            [ input [ class "form-check-input mt-0", type_ "checkbox" ]
                                []
                            ]
                        , input [ class "form-control", id "dome", max "359.99", min "0.00", placeholder "0.00", type_ "number" ]
                            []
                        , span [ class "input-group-text" ]
                            [ text "°              " ]
                        ]
                    ]
                , div [ class "btn-group col" ]
                    [ button [ class "btn btn-outline-primary", type_ "button" ]
                        [ text "park            " ]
                    , button [ class "btn btn-outline-primary", type_ "button" ]
                        [ text "open            " ]
                    , button [ class "btn btn-outline-secondary", type_ "button" ]
                        [ text "close            " ]
                    ]
                ]
            , div [ class "row" ]
                [ small [ class "col-2 text-secondary" ]
                    []
                , small [ class "col text-success" ]
                    [ text "slaved: "
                    , var []
                        [ text "False" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "az: "
                    , var []
                        [ text "50.00" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "open: "
                    , var []
                        [ text "False" ]
                    ]
                ]
            , div [ class "row mt-2" ]
                [ label [ class "col-2 col-form-label", for "focus" ]
                    [ text "Focus" ]
                , div [ class "form-group col-4" ]
                    [ div [ class "input-group" ]
                        [ input [ class "form-control", id "focus", max "25000", min "15000", placeholder "19500", type_ "text" ]
                            []
                        , span [ class "input-group-text" ]
                            [ text "µm              " ]
                        ]
                    ]
                , div [ class "btn-group col" ]
                    [ button [ class "btn btn-outline-primary col", type_ "button" ]
                        [ text "Lamp" ]
                    , button [ class "btn btn-outline-primary col", type_ "button" ]
                        [ text "Light" ]
                    ]
                ]
            , div [ class "row" ]
                [ small [ class "col-2 text-secondary" ]
                    []
                , small [ class "col text-success" ]
                    [ text "position: "
                    , var []
                        [ text "19500" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "lamp: "
                    , var []
                        [ text "Off" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "light: "
                    , var []
                        [ text "Off" ]
                    ]
                ]
            ]
        , fieldset []
            [ h5 []
                [ text "Camera" ]
            , div [ class "row mt-2" ]
                [ label [ class "col-form-label col-2", for "frametyp" ]
                    [ text "Frame" ]
                , div [ attribute "aria-label" "First group", class "btn-group col-4", attribute "role" "group" ]
                    [ button [ class "btn btn-outline-primary", type_ "button" ]
                        [ text "Full" ]
                    , button [ class "btn btn-outline-primary", type_ "button" ]
                        [ text "Half" ]
                    , button [ class "btn btn-outline-primary", type_ "button" ]
                        [ text "2'" ]
                    ]
                , label [ class "col-2 col-form-label", for "binning" ]
                    [ text "Binning" ]
                , div [ class "col" ]
                    [ select [ class "form-control", id "binning" ]
                        [ option [ value "1" ]
                            [ text "1×1" ]
                        , option [ attribute "selected" "", value "2" ]
                            [ text "2×2" ]
                        , option [ value "3" ]
                            [ text "3×3" ]
                        , option [ value "3" ]
                            [ text "4×4" ]
                        ]
                    ]
                ]
            , div [ class "row mt-2" ]
                [ label [ class "col-1 col-form-label", for "x0" ]
                    [ text "X"
                    , sub []
                        [ text "0" ]
                    ]
                , label [ class "col-1 col-form-label", for "y0" ]
                    [ text "Y"
                    , sub []
                        [ text "0" ]
                    ]
                , div [ class "col input-group input-group" ]
                    [ input [ class "form-control", id "x0", max "1", type_ "number", value "123" ]
                        []
                    , input [ class "form-control", id "y0", max "1", type_ "number", value "234" ]
                        []
                    , span [ class "input-group-text" ]
                        [ text "px" ]
                    ]
                ]
            , div [ class "row mt-2" ]
                [ label [ class "col-1 col-form-label", for "xf" ]
                    [ text "Y"
                    , sub []
                        [ text "f" ]
                    ]
                , label [ class "col-1 col-form-label", for "yf" ]
                    [ text "Y"
                    , sub []
                        [ text "f" ]
                    ]
                , div [ class "col input-group input-group" ]
                    [ input [ class "form-control", id "xf", min "2", type_ "number", value "678" ]
                        []
                    , input [ class "form-control", id "yf", min "2", type_ "number", value "789" ]
                        []
                    , span [ class "input-group-text" ]
                        [ text "px" ]
                    ]
                ]
            ]
        , fieldset []
            [ h4 []
                [ text "Object" ]
            , div [ class "row mt-2" ]
                [ label [ class "col-form-label col-2", for "imagetyp" ]
                    [ text "Type" ]
                , div [ class "col input-group" ]
                    [ select [ class "form-control", id "imagetyp", name "imagetyp" ]
                        [ option [ value "1" ]
                            [ text "Science" ]
                        , option [ value "2" ]
                            [ text "Bias" ]
                        , option [ value "3" ]
                            [ text "Flat" ]
                        , option [ value "0" ]
                            [ text "Dark" ]
                        ]
                    ]
                , label [ class "col-form-label col-2", for "filter" ]
                    [ text "Filter" ]
                , div [ class "col input-group" ]
                    [ select [ class "form-control", id "imagetyp", name "filter" ]
                        [ option [ value "1" ]
                            [ text "U" ]
                        , option [ value "2" ]
                            [ text "B" ]
                        , option [ value "3" ]
                            [ text "V" ]
                        , option [ value "4" ]
                            [ text "R" ]
                        , option [ value "5" ]
                            [ text "I" ]
                        , option [ value "6" ]
                            [ text "Hα" ]
                        , option [ value "7" ]
                            [ text "Free" ]
                        ]
                    ]
                ]
            , div [ class "row mt-2" ]
                [ label [ class "col-2 col-form-label", for "exptime" ]
                    [ text "Exptime" ]
                , div [ class "input-group col" ]
                    [ input [ class "form-control", id "exptime", type_ "number", value "120" ]
                        []
                    , span [ class "input-group-text" ]
                        [ text "s" ]
                    ]
                , label [ class "col-2 col-form-label", for "repeat" ]
                    [ text "Repeat" ]
                , div [ class "input-group col" ]
                    [ input [ class "form-control", id "repeat", max "300", min "1", type_ "number", value "1" ]
                        []
                    , span [ class "input-group-text" ]
                        [ text "#" ]
                    ]
                ]
            , div [ class "row mt-2" ]
                [ label [ class "col-form-label col-2", for "object" ]
                    [ text "Object" ]
                , div [ class "col" ]
                    [ input [ class "form-control", id "object", name "object", placeholder "Test", type_ "text", value "Test" ]
                        []
                    ]
                ]
            , div [ class "row mt-2" ]
                [ small [ class "col-2 text-secondary" ]
                    []
                , div [ class "btn-group col", attribute "role" "group" ]
                    [ input [ attribute "autocomplete" "off", class "btn-check", id "btnradio4", name "btnradio", type_ "radio" ]
                        []
                    , label [ class "btn btn btn-outline-primary", for "btnradio4" ]
                        [ text "Video" ]
                    , input [ attribute "autocomplete" "off", class "btn-check", id "btnradio5", name "btnradio", type_ "radio" ]
                        []
                    , label [ class "btn btn btn-outline-primary", for "btnradio5" ]
                        [ text "Expose" ]
                    , input [ attribute "autocomplete" "off", class "btn-check", id "btnradio6", name "btnradio", type_ "radio" ]
                        []
                    , label [ class "btn btn btn-outline-secondary", for "btnradio6" ]
                        [ text "Stop" ]
                    ]
                ]
            , div [ class "row" ]
                [ small [ class "col-2 text-secondary" ]
                    []
                , small [ class "col text-warning" ]
                    [ text "filt: "
                    , var []
                        [ text "moving" ]
                    ]
                , small [ class "col text-warning" ]
                    [ var []
                        [ text "readout" ]
                    ]
                , small [ class "col text-success" ]
                    [ var []
                        [ text "300" ]
                    , text "/"
                    , var []
                        [ text "300" ]
                    ]
                ]
            , div [ class "row" ]
                [ small [ class "col-2 text-secondary" ]
                    []
                , small [ class "col text-success" ]
                    [ text "fan: "
                    , var []
                        [ text "50%" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "T: "
                    , var []
                        [ text "-21.1" ]
                    ]
                , small [ class "col text-success" ]
                    [ text "amb: "
                    , var []
                        [ text "11.0" ]
                    ]
                ]
            ]
        ]
    , form [ class "form mt-2 col" ]
        []
    ]
    