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

<div class="mx-auto max-w-2xl px-4 py-8">
	<!-- Heading -->
	<div class="mb-6">
		<a
			href="/persons"
			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
		>
			<svg
				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M10 19l-7-7m0 0l7-7m-7 7h18"
				/>
			</svg>
			{m.btn_back_to_overview()}
		</a>
		<h1 class="font-serif text-3xl text-brand-navy">{m.persons_new_heading()}</h1>
	</div>

	{#if form?.error}
		<div class="mb-6 rounded border border-red-200 bg-red-50 p-4 text-red-700">{form.error}</div>
	{/if}

	<form method="POST">
		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
				{m.persons_section_details()}
			</h2>

			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
				<div>
					<label for="firstName" class="mb-1 block text-sm font-medium text-gray-700"
						>{m.form_label_first_name()} *</label
					>
					<input
						id="firstName"
						name="firstName"
						type="text"
						required
						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
					/>
				</div>

				<div>
					<label for="lastName" class="mb-1 block text-sm font-medium text-gray-700"
						>{m.form_label_last_name()} *</label
					>
					<input
						id="lastName"
						name="lastName"
						type="text"
						required
						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
					/>
				</div>

				<div class="md:col-span-2">
					<label for="alias" class="mb-1 block text-sm font-medium text-gray-700"
						>{m.form_label_alias()}</label
					>
					<input
						id="alias"
						name="alias"
						type="text"
						placeholder={m.form_placeholder_alias()}
						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
					/>
				</div>
			</div>
		</div>

		<!-- Save Bar -->
		<div
			class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm"
		>
			<a
				href="/persons"
				class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
			>
				{m.btn_cancel()}
			</a>
			<button
				type="submit"
				class="rounded bg-brand-navy px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
			>
				{m.btn_create()}
			</button>
		</div>
	</form>
</div>
