{{ $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="/{{ $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>

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