<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

let {
	person
}: {
	person: {
		firstName: string;
		lastName: string;
		alias?: string | null;
		birthYear?: number | null;
		deathYear?: number | null;
		notes?: string | null;
	};
} = $props();
</script>

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
	<div>
		<label for="firstName" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
			>{m.form_label_first_name()} *</label
		>
		<input
			id="firstName"
			name="firstName"
			type="text"
			required
			value={person.firstName}
			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</div>
	<div>
		<label for="lastName" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
			>{m.form_label_last_name()} *</label
		>
		<input
			id="lastName"
			name="lastName"
			type="text"
			required
			value={person.lastName}
			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</div>
	<div class="md:col-span-2">
		<label for="alias" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
			>{m.form_label_alias()}</label
		>
		<input
			id="alias"
			name="alias"
			type="text"
			value={person.alias ?? ''}
			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</div>
	<div>
		<label for="birthYear" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
			>{m.person_label_birth_year()}</label
		>
		<input
			id="birthYear"
			name="birthYear"
			type="number"
			min="1"
			max="2100"
			placeholder={m.person_placeholder_year()}
			value={person.birthYear ?? ''}
			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</div>
	<div>
		<label for="deathYear" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
			>{m.person_label_death_year()}</label
		>
		<input
			id="deathYear"
			name="deathYear"
			type="number"
			min="1"
			max="2100"
			placeholder={m.person_placeholder_year()}
			value={person.deathYear ?? ''}
			class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
		/>
	</div>
	<div class="md:col-span-2">
		<label for="notes" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
			>{m.person_label_notes()}</label
		>
		<textarea
			id="notes"
			name="notes"
			rows="4"
			placeholder={m.person_placeholder_notes()}
			class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
			>{person.notes ?? ''}</textarea
		>
	</div>
</div>
