init = {};

testApp = {
    email = "",
    password = "",
    combinedText = email & " " & password
};

topLevelText = "";

update = state event \ event
  | _ \ state;

view = state viewport \
 Positioned {
   x = 30,
   y = 30,
   child = Column {
     gap = 10,
     children = [
       textInput {
         key = "email",
         initialValue = testApp.email,
         initialFocus = True,
         w = 300,
         h = 40,
         onChange = text \ testApp.email := text
       },
       textInput {
         key = "password",
         initialValue = testApp.password,
         initialFocus = False,
         w = 300,
         h = 40,
         onChange = text \ testApp.password := text
       },
       Text { content = "Username: " & testApp.email, x = 8, y = 16 },
       Text { content = "Password: " & testApp.password, x = 8, y = 16 },
       Text { content = "Combined: " & testApp.combinedText, x = 8, y = 16 },
       textInput {
         key = "top-level-text",
         initialValue = topLevelText,
         initialFocus = False,
         w = 300,
         h = 40,
         onChange = text \ topLevelText := text
       },
       Text { content = "Top Level: " & topLevelText, x = 8, y = 16 }
     ]
   }
 };

os = { init = init, update = update, view = view }