<div class="max-w-7xl mx-auto px-8 py-8">
	<div class="mb-10 2xl:mb-0">
		<!-- Main header - hidden on 2xl+ screens when scrollspy is visible -->
		<div class="bg-white px-6 py-4 rounded mb-6 2xl:hidden">
			<h1 class="text-4xl font-bold text-gray-900 mb-2">Autor:innen</h1>
			<p class="text-gray-700">Personen, die Beiträge in der Zeitung verfasst haben</p>

			<!-- Integrated checkbox into header -->
			<div class="flex items-center gap-4 mt-4">
				<label class="inline-flex items-center">
					<input type="checkbox"
					       class="form-checkbox h-5 w-5 text-red-600 focus:ring-red-500 focus:border-red-500 checked:bg-red-600 checked:border-red-600 rounded"
					       checked
					       autocomplete="off"
					       hx-get="/akteure/a"
					       hx-target="body"
					       hx-push-url="true">
					<span class="ml-2 text-gray-700">Nur Autor:innen anzeigen</span>
				</label>
			</div>
		</div>
	</div>

<!-- Two Column Layout: Scrollspy + Content -->
<div class="flex gap-8">

	{{ template "_scrollspy_layout" .model }}

	<!-- People List - Main Content -->
	<div class="flex-1 space-y-6 bg-white">
		{{ range $_, $id := $.model.Sorted }}
			{{ $a := index $.model.Agents $id }}
			<div id="author-{{ $id }}" class="p-6 scroll-mt-8 author-section">
				{{ template "_akteur" $a }}
			</div>
		{{ end }}
	</div>
</div>
</div>
