<script lang="ts">
import type { PageData } from './$types';
import TrainingHistory from '$lib/ocr/TrainingHistory.svelte';
import * as m from '$lib/paraglide/messages.js';

let { data }: { data: PageData } = $props();
const personName = $derived(data.history.personNames?.[data.personId] ?? 'Unknown');
</script>

<div class="flex-1 overflow-y-auto p-6">
	<div class="mx-auto flex max-w-4xl flex-col gap-6">
		<div class="flex items-center gap-4">
			<a
				href="/admin/ocr"
				class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
			>
				<svg
					class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					stroke-width="2"
					><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" /></svg
				>
				{m.admin_tab_ocr()}
			</a>
			<h1 class="font-sans text-lg font-bold tracking-widest text-brand-navy uppercase">
				{personName}
			</h1>
		</div>

		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
			<TrainingHistory
				runs={data.history.runs ?? []}
				personNames={data.history.personNames ?? {}}
			/>
		</div>
	</div>
</div>
