<script lang="ts">
	import { Button, Input, Label, Textarea } from 'flowbite-svelte';
	import RichText from '../RichText.svelte';
	import { superForm } from 'sveltekit-superforms';

	let { data } = $props();
	const { form, errors, enhance } = superForm(data);
</script>

<form method="POST" use:enhance class="flex flex-col gap-5">
	<div>
		<Label>Titu</Label>
		<Input bind:value={$form.title} type="text" name="title" required minlength={5} />
		{#if $errors.title}<span class="text-sm text-red-500">{$errors.title}</span>{/if}
	</div>
	<div>
		<Label>Zämefassig</Label>
		<Textarea
			bind:value={$form.summary}
			name="summary"
			required
			minlength={5}
			class="w-full min-h-40"
		/>
		{#if $errors.summary}<span class="text-sm text-red-500">{$errors.summary}</span>{/if}
	</div>
	<div>
		<Label>Inhaut</Label>
		<RichText bind:value={$form.body} name="body" required />
		{#if $errors.body}<span class="text-sm text-red-500">{$errors.body}</span>{/if}
	</div>
	<Button type="submit" class="grow-0 self-end">Spichere</Button>
</form>
