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

<script lang="ts">
import { enhance } from '$app/forms';
import TagInput from '$lib/components/TagInput.svelte';
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
import { m } from '$lib/paraglide/messages.js';

let { form } = $props();

let tags: string[] = $state([]);
let senderId = $state('');
let selectedReceivers: { id: string; firstName: string; lastName: string }[] = $state([]);

let dateDisplay = $state('');
let dateIso = $state('');
let dateDirty = $state(false);

const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');

function germanToIso(german: string): string {
	const match = german.match(/^(\d{2})\.(\d{2})\.(\d{4})$/);
	if (!match) return '';
	const [, d, m, y] = match;
	return `${y}-${m}-${d}`;
}

function handleDateInput(e: Event) {
	const input = e.target as HTMLInputElement;
	const digits = input.value.replace(/\D/g, '').slice(0, 8);
	let formatted: string;
	if (digits.length <= 2) {
		formatted = digits;
	} else if (digits.length <= 4) {
		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
	} else {
		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
	}
	input.value = formatted;
	dateDisplay = formatted;
	dateIso = germanToIso(formatted);
	dateDirty = true;
}
</script>

<div class="mx-auto max-w-4xl px-4 py-8">
	<!-- Heading -->
	<div class="mb-6">
		<a
			href="/"
			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.doc_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" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
		<!-- ── Section 1: Wer & Wann ── -->
		<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.doc_section_who_when()}
			</h2>

			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
				<!-- Datum -->
				<div>
					<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
						>{m.form_label_date()}</label
					>
					<input
						id="documentDate"
						type="text"
						inputmode="numeric"
						value={dateDisplay}
						oninput={handleDateInput}
						placeholder={m.form_placeholder_date()}
						maxlength="10"
						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
                               {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-brand-navy focus:ring-brand-navy'}"
						aria-describedby={dateInvalid ? 'date-error' : undefined}
					/>
					<input type="hidden" name="documentDate" value={dateIso} />
					{#if dateInvalid}
						<p id="date-error" class="mt-1 text-xs text-red-600">
							{m.form_date_error()}
						</p>
					{/if}
				</div>

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

				<!-- Absender -->
				<div>
					<PersonTypeahead name="senderId" label={m.form_label_sender()} bind:value={senderId} />
				</div>

				<!-- Empfänger -->
				<div>
					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
					<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
				</div>
			</div>
		</div>

		<!-- ── Section 2: Beschreibung ── -->
		<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.doc_section_description()}
			</h2>

			<div class="space-y-5">
				<!-- Titel -->
				<div>
					<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
						>{m.form_label_title()} *</label
					>
					<input
						id="title"
						type="text"
						name="title"
						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>

				<!-- Aufbewahrungsort -->
				<div>
					<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
						>{m.form_label_archive_location()}</label
					>
					<input
						id="documentLocation"
						type="text"
						name="documentLocation"
						placeholder={m.form_placeholder_archive_location()}
						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
					/>
					<p class="mt-1 text-xs text-gray-400">{m.form_helper_archive_location()}</p>
				</div>

				<!-- Schlagworte -->
				<div>
					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p>
					<TagInput bind:tags={tags} />
					<input type="hidden" name="tags" value={tags.join(',')} />
				</div>

				<!-- Inhalt -->
				<div>
					<label for="summary" class="mb-1 block text-sm font-medium text-gray-700"
						>{m.form_label_content()}</label
					>
					<textarea
						id="summary"
						name="summary"
						rows="5"
						placeholder={m.form_placeholder_content()}
						class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
					></textarea>
				</div>
			</div>
		</div>

		<!-- ── Section 3: Transkription ── -->
		<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.form_label_transcription()}
			</h2>
			<textarea
				id="transcription"
				name="transcription"
				rows="12"
				placeholder={m.form_placeholder_transcription()}
				class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
			></textarea>
		</div>

		<!-- ── Section 4: Datei ── -->
		<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.doc_section_file()}
			</h2>

			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
				{m.doc_file_upload_label()}
				<span class="font-normal text-gray-400">({m.doc_file_upload_note()})</span>
			</label>
			<input
				id="file-upload"
				type="file"
				name="file"
				class="block w-full cursor-pointer text-sm
                       text-gray-500 file:mr-4 file:rounded
                       file:border-0 file:bg-brand-sand/40
                       file:px-4 file:py-2
                       file:text-sm file:font-semibold
                       file:text-brand-navy hover:file:bg-brand-sand/60"
			/>
		</div>

		<!-- ── Sticky Save Bar ── -->
		<div
			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
		>
			<a href="/" 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_save()}
			</button>
		</div>
	</form>
</div>