View.elm

view : Model -> Html Msg
view model =
    section [ class "section" ]
        [ div [ class "container" ]
            [ h1 [ class "title" ]
                [ text model.projectName ]
            , p [ class "subtitle" ]
                [ button [ class "button", onClick TogglePopup ]
                    [ text "Show Popup"
                    ]
                ]
            , if model.isPopUpActive then
                renderModal model
              else
                Html.text ""
            ]
        ]


renderModal : Model -> Html Msg
renderModal model =
    div [ class "modal is-active", attribute "aria-label" "Modal title" ]
        [ div [ class "modal-background", onClick TogglePopup ]
            []
        , div [ class "modal-card" ]
            [ header [ class "modal-card-head" ]
                [ p [ class "modal-card-title" ]
                    [ text "Modal title" ]
                , button [ class "delete", onClick TogglePopup, attribute "aria-label" "close" ]
                    []
                ]
            , section [ class "modal-card-body" ]
                [ text "Modal contents" ]
            , footer [ class "modal-card-foot" ]
                [ button [ class "button", onClick TogglePopup, attribute "aria-label" "cancel" ]
                    [ text "Cancel" ]
                ]
            ]
        ]