<script lang="ts">
import { enhance } from '$app/forms';
import { m } from '$lib/paraglide/messages.js';
import BackButton from '$lib/shared/primitives/BackButton.svelte';
import DocumentEditLayout from '$lib/document/DocumentEditLayout.svelte';

let { data, form } = $props();

const doc = $derived(data.document);
</script>

<svelte:head>
	<title>{doc.title || doc.originalFilename || 'Dokument'} — Anreicherung</title>
</svelte:head>

<DocumentEditLayout doc={doc} formId="save-form" formAction="?/save" formError={form?.error}>
	{#snippet topbar()}
		<BackButton class="" />

		<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
			{doc.title || doc.originalFilename}
		</p>

		<p class="font-sans text-xs text-ink-3">
			{m.enrich_progress({ count: data.incompleteCount })}
		</p>
	{/snippet}

	{#snippet actionbar()}
		<button
			type="submit"
			form="skip-form"
			class="font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
		>
			{m.enrich_skip()}
		</button>

		<div class="flex items-center gap-3">
			<button
				type="submit"
				form="save-form"
				formaction="?/save"
				class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
			>
				{m.btn_save()}
			</button>

			<button
				type="submit"
				form="save-form"
				formaction="?/saveAndReview"
				class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
			>
				{m.btn_save_and_mark_reviewed()}
			</button>
		</div>
	{/snippet}
</DocumentEditLayout>

<form id="skip-form" method="POST" action="?/skip" use:enhance></form>
