<script lang="ts">
	import type { AddCharacterInput, Character } from '$gql/graphql';
	import SubmitButton from '$lib/components/SubmitButton.svelte';
	import { itemPending, type FormProps } from '$lib/Form';

	let { initial, submit, children }: FormProps<Character, AddCharacterInput> = $props();

	let input = $state(initial);
	let pending = $derived(input.name.length > 0 && itemPending(initial, input));

	function onsubmit(event: SubmitEvent) {
		event.preventDefault();

		submit({ ...input });
	}
</script>

<form {onsubmit}>
	<div class="grid-labels">
		<label class="self-center" for="name">Name</label>
		<!-- svelte-ignore a11y_autofocus -->
		<input autofocus required id="name" bind:value={input.name} />
	</div>
	<div class="flex gap-4">
		{@render children?.()}
		<div class="grow"></div>
		<SubmitButton {pending} />
	</div>
</form>