<script lang="ts">
	import CalendarGrid from '$lib/components/CalendarGrid.svelte';

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

<svelte:head>
	<title>{data.board.title} - Calendar</title>
</svelte:head>

<div class="flex flex-col h-[calc(100vh-3.5rem)]">
	<!-- Header -->
	<div class="flex items-center gap-3 px-4 py-3 bg-white/80 border-b border-gray-200 dark:bg-gray-900/80 dark:border-gray-700 flex-wrap">
		<a href="/boards/{data.board.id}" class="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition" aria-label="Back to board">
			<svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
				<path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd" />
			</svg>
		</a>
		<h1 class="text-lg font-bold text-gray-900 dark:text-gray-100">{data.board.title}</h1>

		<div class="flex gap-1 bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5">
			<a
				href="/boards/{data.board.id}"
				class="px-3 py-1 text-sm rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
			>
				Board
			</a>
			<span class="px-3 py-1 text-sm rounded-md bg-white dark:bg-gray-700 shadow-sm font-medium text-gray-900 dark:text-gray-100">
				Calendar
			</span>
		</div>
	</div>

	<!-- Calendar -->
	<div class="flex-1 overflow-y-auto p-4">
		{#if data.cards.length === 0}
			<div class="text-center py-12">
				<p class="text-gray-400 dark:text-gray-500">No cards with due dates.</p>
				<a href="/boards/{data.board.id}" class="text-sm text-[var(--color-primary)] hover:underline mt-2 inline-block">Back to board</a>
			</div>
		{:else}
			<CalendarGrid
				cards={data.cards}
				boardId={data.board.id}
				cardPrefix={data.board.cardPrefix}
			/>
		{/if}
	</div>
</div>
