{{ $y := .model.Year }}


<div class="mt-6 w-full">
	<div class="mx-auto flex flex-row gap-x-4 w-fit items-end leading-none">
		{{ range $year := .model.AvailableYears }}
			<a
				href="/jahrgang/{{ $year }}"
				class="no-underline leading-none !m-0 !p-0
				{{ if eq $year $y }}text-2xl font-bold pointer-events-none" aria-current="page{{ end }}"
				>{{ $year }}</a
			>
		{{ end }}
	</div>
</div>

<!-- Page Jump Form -->
<div class="mt-8 w-full">
	<div class="mx-auto text-center">
		<h3 class="text-lg font-medium text-slate-700 mb-6">Direkt zu Seite springen</h3>

		<form hx-post="/jump" hx-target="#jump-errors" hx-swap="innerHTML" hx-target-4*="#jump-errors" hx-target-5*="#jump-errors" hx-ext="response-targets" class="inline-flex items-center gap-3">
			<!-- Year Selection -->
			<div class="flex items-center gap-2">
				<label for="jump-year" class="text-sm text-slate-600 whitespace-nowrap">Jahr</label>
				<select id="jump-year" name="year" value="{{ $y }}" class="px-2 py-1 border border-slate-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400">
					{{ range $year := .model.AvailableYears }}
						<option value="{{ $year }}" {{ if eq $year $y }}selected{{ end }}>{{ $year }}</option>
					{{ end }}
				</select>
			</div>

			<!-- Page Input -->
			<div class="flex items-center gap-2">
				<label for="jump-page" class="text-sm text-slate-600 whitespace-nowrap">Seite</label>
				<input type="number" id="jump-page" name="page" min="1" placeholder="42" class="w-20 px-2 py-1 border border-slate-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400">
			</div>

			<!-- Submit Button -->
			<button type="submit" class="inline-flex items-center px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1">
				<i class="ri-arrow-right-line mr-1"></i>
				Springen
			</button>
		</form>

		<!-- Error Display Area -->
		<div id="jump-errors" class="mt-3 min-h-[1.5rem]"></div>

		<!-- Instructions -->
		<div class="mt-4 text-sm text-slate-500">
			<p>Geben Sie Jahr und Seitenzahl ein, um direkt zur entsprechenden Ausgabe zu springen.</p>
		</div>
	</div>
</div>

<script>
// Clear errors when user starts typing
document.addEventListener('DOMContentLoaded', function() {
	const errorContainer = document.getElementById('jump-errors');
	const yearSelect = document.getElementById('jump-year');
	const pageInput = document.getElementById('jump-page');

	function clearErrors() {
		if (errorContainer) {
			errorContainer.innerHTML = '';
		}
	}

	if (yearSelect) yearSelect.addEventListener('change', clearErrors);
	if (pageInput) pageInput.addEventListener('input', clearErrors);
});
</script>

<div class="grid grid-cols-11 gap-x-2 gap-y-4 pt-8">
	{{ range $index, $month := .model.Issues }}

		<!-- Month Header -->
		<div class="col-span-1 text-right py-1 px-2.5">
			{{ $first := index $month 0 }}
			<h2 class="text-lg">{{ (MonthName $first.Datum.When.Month) }}</h2>
		</div>

		<!-- Issues -->
		<div class="col-span-10 grid grid-cols-subgrid">
			{{ range $issue := $month }}
				<div class="col-span-1 bg-slate-100 px-2 py-1.5">
					{{ $date := $issue.Datum.When }}
					<a class="no-underline!" href="/{{ $y }}/{{ $issue.Number.No }}">
						<div class="">
							{{ $issue.Number.No }}
						</div>

						<div class="">
							<div class="inline-block font-bold font-variant-small-caps pr-1">
								{{ (WeekdayName $date.Weekday).Short }}
							</div>
							<div class="inline-block">{{ $date.Day }}.{{ index $date.Month }}.</div>
						</div>
					</a>
				</div>
			{{ end }}
		</div>
	{{ end }}
</div>
