cc9c47254b
All 7 in-scope back navigation links converted to use history.back(). Admin panel mobile chevron converted inline (icon-only, different visual pattern). Cancel buttons left as static <a> links. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
125 lines
3.7 KiB
Svelte
125 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
import BackButton from '$lib/components/BackButton.svelte';
|
|
let { form } = $props();
|
|
</script>
|
|
|
|
<div class="mx-auto max-w-2xl px-4 py-8">
|
|
<!-- Heading -->
|
|
<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>
|
|
<label for="firstName" class="mb-1 block text-sm font-medium text-ink-2"
|
|
>{m.form_label_first_name()} *</label
|
|
>
|
|
<input
|
|
id="firstName"
|
|
name="firstName"
|
|
type="text"
|
|
required
|
|
class="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"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="lastName" class="mb-1 block text-sm font-medium text-ink-2"
|
|
>{m.form_label_last_name()} *</label
|
|
>
|
|
<input
|
|
id="lastName"
|
|
name="lastName"
|
|
type="text"
|
|
required
|
|
class="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"
|
|
/>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<label for="alias" class="mb-1 block text-sm font-medium text-ink-2"
|
|
>{m.form_label_alias()}</label
|
|
>
|
|
<input
|
|
id="alias"
|
|
name="alias"
|
|
type="text"
|
|
placeholder={m.form_placeholder_alias()}
|
|
class="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"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="birthYear" class="mb-1 block text-sm font-medium text-ink-2"
|
|
>{m.person_label_birth_year()}</label
|
|
>
|
|
<input
|
|
id="birthYear"
|
|
name="birthYear"
|
|
type="number"
|
|
min="1"
|
|
max="2100"
|
|
placeholder={m.person_placeholder_year()}
|
|
class="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"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="deathYear" class="mb-1 block text-sm font-medium text-ink-2"
|
|
>{m.person_label_death_year()}</label
|
|
>
|
|
<input
|
|
id="deathYear"
|
|
name="deathYear"
|
|
type="number"
|
|
min="1"
|
|
max="2100"
|
|
placeholder={m.person_placeholder_year()}
|
|
class="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"
|
|
/>
|
|
</div>
|
|
|
|
<div class="md:col-span-2">
|
|
<label for="notes" class="mb-1 block text-sm font-medium text-ink-2"
|
|
>{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>
|
|
|
|
<!-- Save Bar -->
|
|
<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>
|