open Feliz
open Elmish

type Model =
    { Value : string }

type Msg =
    | ChangeValue of string

let init () =
    { Value = "" }, Cmd.none

let update (msg:Msg) (model:Model) =
    match msg with
    | ChangeValue newValue ->
        { model with Value = newValue }, Cmd.none

let view model dispatch =
    Html.div [
        Html.input [
            prop.value model.Value
            prop.onChange (fun value ->
                value |> ChangeValue |> dispatch
            )
        ]

        Html.span [
            prop.text $"Hello, %s{model.Value}!"
        ]
    ]

open Feliz

let view model dispatch =
    Html.div [
        Html.input [
            prop.value model.Value
            prop.onChange (fun value ->
                value |> ChangeValue |> dispatch
            )
        ]

        Html.span [
            prop.text $"Hello, %s{model.Value}!"
        ]
    ]

open Elmish
// Make the program support navigation
open Elmish.Navigation

Program.mkProgram init update view
|> Program.toNavigable parser urlUpdate
|> Program.run

// Usage

let update model msg =
    match msg with
    | GoToTutorial ->
        // Built-in function to manipulate location
        model, Navigation.newUrl "tutorial"