{{ $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 max-w-md bg-slate-50 p-6 rounded-lg border border-slate-200">
		<h3 class="text-lg font-semibold text-slate-800 mb-4 text-center">Direkt zu Seite springen</h3>

		<form hx-post="/jump" hx-swap="outerHTML" class="space-y-4">
			<div class="grid grid-cols-2 gap-4">
				<!-- Year Selection -->
				<div>
					<label for="jump-year" class="block text-sm font-medium text-slate-700 mb-1">Jahr</label>
					<select id="jump-year" name="year" value="{{ $y }}" class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
						{{ range $year := .model.AvailableYears }}
							<option value="{{ $year }}" {{ if eq $year $y }}selected{{ end }}>{{ $year }}</option>
						{{ end }}
					</select>
					<div id="year-error"></div>
				</div>

				<!-- Page Input -->
				<div>
					<label for="jump-page" class="block text-sm font-medium text-slate-700 mb-1">Seite</label>
					<input type="number" id="jump-page" name="page" min="1" placeholder="z.B. 42" class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
					<div id="page-error"></div>
				</div>
			</div>

			<!-- Submit Button -->
			<div class="text-center">
				<button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
					<i class="ri-arrow-right-line mr-2"></i>
					Zur Seite springen
				</button>
			</div>
		</form>

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

<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>