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

	import { goto } from '$app/navigation';

	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;

	const { form, errors, enhance } = superForm(data.form, {
		onResult({ result }) {
			switch (result.type) {
				case 'redirect':
					goto(result.location, {
						replaceState: true
					});
					break;
			}
		}
	});
</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} />
				{#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}
				/>
				{#if $errors.passwd}<span class="text-sm text-red-500">{$errors.passwd}</span>{/if}

				<Button class="mt-2" variant="brand">
					<!-- {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} -->
					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>
