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

let { data }: { data: PageData } = $props();
</script>

<div class="flex flex-col gap-6 p-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">
			{m.ocr_global_history_heading()}
		</h1>
	</div>

	<TrainingHistory runs={data.history.runs ?? []} personNames={data.history.personNames ?? {}} />
</div>
