pub fn Page(ctx: zx.PageContext) zx.Component {
    return (
        <main @allocator={ctx.arena}>
            <LoginForm @rendering={.client} />
        </main>
    );
}

pub fn LoginForm(ctx: *zx.ComponentContext) zx.Component {
    const msg = ctx.state([]const u8, "Please log in");
    return (
        <form @allocator={ctx.allocator} action={ctx.bind(handleSubmit)}>
            <p>{msg}</p>
            <input placeholder="Name" name="name" defaultValue="Ziex" required />
            <input placeholder="ID" name="id" required />
            <button>Submit</button>
        </form>
    );
}

const LoginInput = struct { name: []const u8, id: i32 };
fn handleSubmit(ctx: *zx.server.Action.Stateful) void {
    const data = ctx.data(LoginInput);
    const msg = ctx.state([]const u8);

    zx.log.info("\n\nName: {s}\nID: {d}\nMessage: {s}\n", .{ data.name, data.id, msg.get()});

    if (!(data.id > 0) or data.id > 100) {
        msg.set("ID must be between 1 and 100");
        return;
    }

    msg.set(ctx.fmt("Hello, {s}! ({d})", .{ data.name, data.id }) catch "Err");
    zx.log.info("\n\nName: {s}\nID: {d}\n", .{ data.name, data.id });
}

pub const options: zx.PageOptions = .{
    .methods = &.{ .GET, .POST },
};

const zx = @import("zx");
