familienarchiv/frontend/src/routes/persons/new/+page.svelte

<script lang="ts">
import { untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import BackButton from '$lib/shared/primitives/BackButton.svelte';
import PersonTypeSelector from '$lib/person/PersonTypeSelector.svelte';
import { PERSON_TYPES as TYPES, type PersonType } from '$lib/person/person-validation';

let { form } = $props();

let selectedType = $state<PersonType>(
	untrack(() =>
		TYPES.includes((form?.personType as PersonType) ?? 'PERSON')
			? ((form?.personType as PersonType) ?? 'PERSON')
			: 'PERSON'
	)
);

const isPerson = $derived(selectedType === 'PERSON');
const lastNameLabel = $derived(
	selectedType === 'INSTITUTION' || selectedType === 'GROUP'
		? m.form_label_name()
		: m.form_label_last_name()
);

const inputCls =
	'block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring';
const labelCls = 'mb-1 block text-sm font-medium text-ink-2';
</script>

<div class="mx-auto max-w-2xl px-4 py-8">
	<div class="mb-6">
		<BackButton />
		<h1 class="font-serif text-3xl text-ink">{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-line bg-surface p-6 shadow-sm">
			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.persons_section_details()}
			</h2>

			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
				<div class="md:col-span-2">
					<p class={labelCls}>{m.form_label_person_type()}</p>
					<PersonTypeSelector
						value={selectedType}
						name="personType"
						onchange={(type: PersonType) => (selectedType = type)}
					/>
				</div>

				{#if isPerson}
					<div>
						<label for="title" class={labelCls}>{m.form_label_title()}</label>
						<input
							id="title"
							name="title"
							type="text"
							maxlength="50"
							value={form?.title ?? ''}
							class={inputCls}
						/>
					</div>
					<div>
						<label for="firstName" class={labelCls}>{m.form_label_first_name()} *</label>
						<input
							id="firstName"
							name="firstName"
							type="text"
							required
							value={form?.firstName ?? ''}
							class={inputCls}
						/>
					</div>
				{/if}

				<div class={!isPerson ? 'md:col-span-2' : ''}>
					<label for="lastName" class={labelCls}>{lastNameLabel} *</label>
					<input
						id="lastName"
						name="lastName"
						type="text"
						required
						value={form?.lastName ?? ''}
						class={inputCls}
					/>
				</div>

				{#if isPerson}
					<div class="md:col-span-2">
						<label for="alias" class={labelCls}>{m.form_label_alias()}</label>
						<input
							id="alias"
							name="alias"
							type="text"
							placeholder={m.form_placeholder_alias()}
							value={form?.alias ?? ''}
							class={inputCls}
						/>
					</div>
					<div>
						<label for="birthYear" class={labelCls}>{m.person_label_birth_year()}</label>
						<input
							id="birthYear"
							name="birthYear"
							type="number"
							min="1"
							max="2100"
							placeholder={m.person_placeholder_year()}
							class={inputCls}
						/>
					</div>
					<div>
						<label for="deathYear" class={labelCls}>{m.person_label_death_year()}</label>
						<input
							id="deathYear"
							name="deathYear"
							type="number"
							min="1"
							max="2100"
							placeholder={m.person_placeholder_year()}
							class={inputCls}
						/>
					</div>
				{/if}

				<div class="md:col-span-2">
					<label for="notes" class={labelCls}>{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 p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
					></textarea>
				</div>
			</div>
		</div>

		<div
			class="mt-4 flex items-center justify-between rounded-sm border border-line bg-surface px-6 py-4 shadow-sm"
		>
			<a href="/persons" class="text-sm font-medium text-ink-2 transition-colors hover:text-ink">
				{m.btn_cancel()}
			</a>
			<button
				type="submit"
				class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80"
			>
				{m.btn_create()}
			</button>
		</div>
	</form>
</div>