<script>
	import HCaptcha from "../../../lib/components/hCaptcha.svelte";
	/** @type {import('./$types').ActionData} */ export let form;

	let captchaValid = false;
	let captchaToken;
</script>

<svelte:head>
	<title>Register - Rowblox</title>
</svelte:head>

<form method="POST" class="max-w-lg mx-auto text-center text-white">
	<img class="mx-auto mb-2" src="/favicon.png" alt="" />
	<div class="flex flex-col">
		<input
			class="rounded-lg w-[19rem] px-4 border-2 {form?.error == 'username' ? 'border-red-500' : 'border-blue-500'} text-black mx-auto my-0.5 py-2"
			required
			type="username"
			name="username"
			id="username"
			placeholder="Username"
			value={form?.username ?? ""}
		/>
		<input
			class="rounded-lg w-[19rem] px-4 border-2 {form?.error == 'password' ? 'border-red-500' : 'border-blue-500'} text-black mx-auto my-0.5 py-2"
			required
			type="password"
			name="password"
			id="password"
			placeholder="Password"
		/>
		<input
			class="rounded-lg w-[19rem] px-4 border-2 {form?.error == 'password' ? 'border-red-500' : 'border-blue-500'} text-black mx-auto my-0.5 py-2"
			required
			type="password"
			name="confirm_password"
			id="confirm_password"
			placeholder="Confirm Password"
		/>
		<input
			class="rounded-lg w-[19rem] px-4 border-2 {form?.error == 'invite_key' ? 'border-red-500' : 'border-blue-500'} text-black mx-auto mt-0.5 mb-1.5 py-2"
			required
			type="text"
			name="invite_key"
			id="invite_key"
			placeholder="Invite Key"
			value={form?.invite_key ?? ""}
		/>
	</div>
	{#if form?.message}
		<p class="rounded w-[19rem] px-4 border-2 border-red-500 text-red-500 bg-red-500 mx-auto my-1.5 py-1.5 bg-opacity-50">{form?.message}</p>
	{/if}
	<div class={form?.error == "hcaptcha" && "border-2 border-red-500"}>
		<HCaptcha bind:token={captchaToken} bind:isValid={captchaValid} />
	</div>
	<button class="my-1.5 text-xl text-white px-4 py-1.5 w-[19rem] rounded shadow-lg border-2 border-blue-500 hover:bg-opacity-50 hover:bg-blue-500">Register</button>
</form>
