// "New game" screen. Form fields: world, name, host, port, password.
root: Column {
    width: Fill,
    height: Fill,
    align: Center,
    justify: Center,
    gap: 16,
    background: "backdrop",
    children: [
        Text { text: "New game", size: 34, color: "accent" },
        Panel {
            gap: 10,
            width: Px(420),
            children: [
                Text { text: "World name", color: "dim" },
                Input {
                    id: "world",
                    value: "{suggested_world}",
                    width: Fill,
                    max_len: 32,
                    submit: "new_game",
                    tooltip: "Name of the save game",
                },
                Text { text: "Character name", color: "dim" },
                Input {
                    id: "name",
                    value: "{profile_name}",
                    width: Fill,
                    max_len: 24,
                    submit: "new_game",
                    tooltip: "Letters, digits, spaces, _ and - (max 24)",
                },
                Checkbox {
                    id: "host",
                    text: "Allow other players to join",
                    tooltip: "Host the world on the network. You are always an admin of your own world.",
                },
                Row {
                    gap: 10,
                    align: Center,
                    visible: "host",
                    children: [
                        Text { text: "Port", color: "dim" },
                        Input { id: "port", value: "{default_port}", width: Px(80), max_len: 5 },
                        Text { text: "Password", color: "dim" },
                        Input {
                            id: "password",
                            password: true,
                            placeholder: "none",
                            width: Px(140),
                            tooltip: "Players need this password to join (empty: no password)",
                        },
                    ],
                },
                Text { text: "{message}", color: "error", visible: "message", max_width: 390 },
                Row {
                    gap: 10,
                    justify: SpaceBetween,
                    width: Fill,
                    children: [
                        Button { text: "Back", action: "screen:main" },
                        Button { text: "Create", action: "new_game" },
                    ],
                },
            ],
        },
    ],
}