<script lang="ts">
	import type { PageData } from './$types';

	import { Loader2 } from 'lucide-svelte';
	import { superForm } from 'sveltekit-superforms/client';

	import Button from '$lib/components/ui/Button.svelte';
	import Input from '$lib/components/ui/Input.svelte';

	export let data: PageData;

	let submitting = false;

	const { form, errors, enhance } = superForm(data.form, {
		onSubmit() {
			submitting = true;
		},
		onResult() {
			submitting = false;
		}
	});
</script>

<div class="flex h-screen w-full">
	<div class="flex w-full flex-col items-center justify-center">
		<div class="flex w-full max-w-xs flex-col gap-4">
			<h1 class="mx-auto text-xl font-bold">Connexion</h1>
			<form class="flex flex-col justify-center gap-2" method="POST" use:enhance>
				<label for="pseudo"> Nom d'utilisateur </label>
				<Input
					name="pseudo"
					placeholder="Barlow"
					type="text"
					required
					bind:value={$form.pseudo}
					aria-invalid={$errors.pseudo ? 'true' : undefined}
				/>
				{#if $errors.pseudo}<span class="text-sm text-red-500">{$errors.pseudo}</span>{/if}

				<label for="passwd"> Mot de passe </label>
				<Input
					name="passwd"
					placeholder="************"
					type="password"
					required
					bind:value={$form.passwd}
					aria-invalid={$errors.passwd ? 'true' : undefined}
				/>
				{#if $errors.passwd}<span class="text-sm text-red-500">{$errors.passwd}</span>{/if}

				<Button class="mt-2" variant="brand" disabled={submitting}>
					{#if submitting}
						<Loader2 class="mr-2 h-4 w-4 animate-spin" />
					{/if}
					Se connecter
				</Button>

				<ul class="flex justify-between">
					<li>
						<a class="text-highlight-secondary hover:text-brand" href="/sign-up"> S'inscrire </a>
					</li>
					<li>
						<a class="text-highlight-secondary hover:text-brand" href="/forgot-password">
							Mot de passe oublié
						</a>
					</li>
				</ul>
			</form>
		</div>
	</div>
</div>
