// "Join server" screen. Form fields: address, name, password.
root: Column {
    width: Fill,
    height: Fill,
    align: Center,
    justify: Center,
    gap: 16,
    background: "backdrop",
    children: [
        Text { text: "Join server", size: 34, color: "accent" },
        Panel {
            gap: 10,
            width: Px(420),
            children: [
                Text { text: "Address", color: "dim" },
                Input {
                    id: "address",
                    value: "{last_address}",
                    placeholder: "host or host:port",
                    width: Fill,
                    max_len: 128,
                    submit: "join",
                    tooltip: "Server address; the port defaults to {default_port}",
                },
                Text { text: "Character name", color: "dim" },
                Input {
                    id: "name",
                    value: "{profile_name}",
                    width: Fill,
                    max_len: 24,
                    submit: "join",
                    tooltip: "Letters, digits, spaces, _ and - (max 24)",
                },
                Text { text: "Password", color: "dim" },
                Input {
                    id: "password",
                    password: true,
                    placeholder: "only if the server requires one",
                    width: Fill,
                    submit: "join",
                },
                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: "Join", action: "join" },
                    ],
                },
            ],
        },
    ],
}