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

	import { zodClient } from 'sveltekit-superforms/adapters';
	import { superForm } from 'sveltekit-superforms/client';

	import * as Form from '$lib/components/ui/form';
	import Input from '$lib/components/ui/input/input.svelte';

	import { groupSchema } from '$lib/validations/group';
	import Loader from 'lucide-svelte/icons/loader-circle';

	export let data: PageData;

	const form = superForm(data.form, {
		validators: zodClient(groupSchema),
		delayMs: 500,
		multipleSubmits: 'prevent'
	});

	const { form: formData, enhance, delayed } = form;
</script>

<section>
	<div class="flex flex-col gap-4">
		<h2 class="text-xl font-bold">Nouveau groupe</h2>
		<form class="flex flex-col justify-center gap-2" method="POST" use:enhance>
			<Form.Field {form} name="name">
				<Form.Control let:attrs>
					<Form.Label>Nom du groupe</Form.Label>
					<Input {...attrs} bind:value={$formData.name} placeholder="Peerat sailors" />
				</Form.Control>
				<Form.FieldErrors />
			</Form.Field>
			<Form.Button type="submit" disabled={$delayed}>
				{#if $delayed}
					<Loader class="mr-2 h-4 w-4 animate-spin" />
				{/if}
				Créer
			</Form.Button>
		</form>
	</div>
</section>
