package pages

import (
	"github.com/ryanhamamura/games/features/common/layouts"
	"github.com/starfederation/datastar-go/datastar"
)

templ RegisterPage() {
	@layouts.Base("Register") {
		<main class="max-w-sm mx-auto mt-8 text-center" data-signals="{username: '', password: '', confirm: '', error: ''}">
			<h1 class="text-3xl font-bold">Register</h1>
			<p class="mb-4">Create a new account</p>
			<div data-show="$error != ''" class="alert alert-error mb-4" data-text="$error"></div>
			<div>
				<fieldset class="fieldset">
					<label class="label" for="username">Username</label>
					<input
						class="input input-bordered w-full"
						id="username"
						type="text"
						placeholder="Choose a username"
					data-bind="username"
					data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("/auth/register") }
					autofocus
				/>
					<label class="label" for="password">Password</label>
					<input
						class="input input-bordered w-full"
						id="password"
						type="password"
						placeholder="Choose a password (min 8 chars)"
					data-bind="password"
					data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("/auth/register") }
				/>
					<label class="label" for="confirm">Confirm Password</label>
					<input
						class="input input-bordered w-full"
						id="confirm"
						type="password"
						placeholder="Confirm your password"
						data-bind="confirm"
						data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("/auth/register") }
					/>
				</fieldset>
				<button
					class="btn btn-primary w-full"
					data-on:click={ datastar.PostSSE("/auth/register") }
				>
					Register
				</button>
			</div>
			<p>
				Already have an account? <a class="link" href="/login">Login</a>
			</p>
		</main>
	}
}