{{- /* Categories list page body */ -}}
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
	{{- /* Main content */ -}}
	<div class="lg:col-span-3">
		{{- /* Categories grid */ -}}
		<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mt-6">
			{{- range $categoryID := .model.Sorted -}}
				{{- $categoryData := index $.model.Categories $categoryID -}}
				{{- $category := $categoryData.Category -}}
				{{- $readable := $categoryData.Readable -}}
				<div class="bg-white rounded p-4 hover:bg-slate-50 transition-colors duration-200"
					 data-filter-item
					 data-category-name="{{ if $category.Names }}{{ index $category.Names 0 }}{{ else }}{{ $category.ID }}{{ end }}"
					 data-category-description="{{ if $readable.Annotations }}{{ $readable.Annotations | html }}{{ end }}{{ if $readable.Notes }} {{ $readable.Notes | html }}{{ end }}">
					<div class="mb-3">
						<h2 class="text-lg font-medium mb-1 text-slate-900">
							{{ if $category.Names }}{{ index $category.Names 0 }}{{ else }}{{ $category.ID }}{{ end }}
						</h2>
						<p class="text-sm text-slate-500">
							{{ $categoryData.PieceCount }} {{ if eq $categoryData.PieceCount 1 }}Beitrag{{ else }}Beiträge{{ end }}
						</p>
					</div>

					{{- /* Show category annotations and notes */ -}}
					{{- if $readable.AnnotationsHTML -}}
						<div class="text-sm text-slate-700 mb-2">
							{{- range $annotation := $readable.AnnotationsHTML -}}
								{{ $annotation }}
							{{- end -}}
						</div>
					{{- end -}}
					{{- if $readable.NotesHTML -}}
						<div class="text-sm text-slate-600 italic">
							{{- range $note := $readable.NotesHTML -}}
								{{ $note }}
							{{- end -}}
						</div>
					{{- end -}}

					{{- /* Available years */ -}}
					{{- if $categoryData.AvailableYears -}}
						<div class="mt-3 pt-2 border-t border-slate-100">
							<div class="flex flex-wrap gap-1">
								{{- range $yearData := $categoryData.AvailableYears -}}
									<a href="/kategorie/{{ $category.ID }}/{{ $yearData.Year }}"
									   class="inline-block px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded hover:bg-blue-200 hover:text-blue-800 transition-colors duration-150"
									   title="{{ $yearData.PieceCount }} {{ if eq $yearData.PieceCount 1 }}Beitrag{{ else }}Beiträge{{ end }}">
										{{ $yearData.Year }}
									</a>
								{{- end -}}
							</div>
						</div>
					{{- end -}}
				</div>
			{{- end -}}
		</div>
	</div>

	{{- /* Sidebar */ -}}
	<div class="lg:col-span-1 sticky top-0 self-start">
		<div class="bg-slate-50 p-6 filter-sidebar">
			<h1 class="text-2xl font-bold text-slate-800 mb-4">Kategorien</h1>

			<p class="text-slate-600 mb-6">
				Verzeichnis aller Kategorien von Beiträgen in der Königsberger Gelehrten und Politischen Zeitung
			</p>

			{{- /* Search Filter */ -}}
			<div class="mb-4">
				<generic-filter
					placeholder="Kategorien durchsuchen..."
					item-selector="[data-filter-item]"
					search-attributes="data-category-name,data-category-description"
					count-selector="[data-filter-count]"
					item-type="Kategorien"
					item-type-singular="Kategorie">
				</generic-filter>
			</div>

			<div class="text-sm text-slate-700 mb-4" data-filter-count>
				{{ len .model.Categories }} Kategorien
			</div>
		</div>

		{{- /* Statistics */ -}}
		<div class="bg-slate-50 border border-slate-200 rounded-lg p-4 mt-4">
			<div class="text-sm text-slate-700">
				<p class="mb-2">
					<span class="font-medium">{{ len .model.Categories }}</span> Kategorien verfügbar
				</p>
				{{- $totalPieces := 0 -}}
				{{- range $categoryData := .model.Categories -}}
					{{- $totalPieces = add $totalPieces $categoryData.PieceCount -}}
				{{- end -}}
				<p>
					<span class="font-medium">{{ $totalPieces }}</span> Beiträge insgesamt
				</p>
			</div>
		</div>
	</div>
</div>