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

<svelte:head>
	<title>Login - 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"
			type="username"
			name="username"
			id="username"
			placeholder="Username"
			required
			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"
			type="password"
			name="password"
			id="password"
			placeholder="Password"
			required
		/>
	</div>
	{#if form?.message}
		<p class="rounded w-[19rem] px-4 border-[3px] border-red-500 text-red-500 mx-auto my-1.5 py-1.5 hover:bg-opacity-50 hover:bg-red-500">{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-[19rem] rounded shadow-lg border-2 border-blue-500 hover:bg-opacity-50 hover:bg-blue-500">Login</button>
</form>
