<script>
	/** @type {import('./$types').ActionData} */ export let form;
</script>

<svelte:head>
	<title>Register - Rowblox</title>
	<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</svelte:head>

<form method="POST" class="max-w-lg mx-auto text-center text-white">
	<img class="mx-auto" src="/favicon.png" alt="" />
	<div class="flex flex-col">
		<input
			class="rounded w-72 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 w-72 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 w-72 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 w-72 px-4 border-2 {form?.error == 'invite_key' ? 'border-red-500' : 'border-blue-500'} text-black mx-auto my-0.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-72 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="h-captcha" data-sitekey="30000000-ffff-ffff-ffff-000000000003" />
	<button class="my-1.5 text-xl text-white px-4 py-1.5 w-full rounded shadow-lg border-2 border-blue-500 hover:bg-opacity-50 hover:bg-blue-500">Register</button>
</form>
