{{ $model := .model }}

{{ if $model.Images.HasImages }}
	<!-- Container with proper padding -->
	<div class="">
		<!-- Two-column layout for piece view -->
		<div class="flex flex-col lg:flex-row gap-6 w-full min-h-screen">
			<!-- Column 1: Table of Contents with Scrollspy -->
			<div class="lg:w-1/4 xl:w-1/4 2xl:w-1/4 3xl:w-1/5 flex-shrink-0 bg-slate-50 px-4 py-4">
				<div class="sticky top-0 max-h-screen overflow-y-auto overscroll-contain bg-slate-50">
					<inhaltsverzeichnis-scrollspy>
						{{ template "_piece_inhaltsverzeichnis" . }}
					</inhaltsverzeichnis-scrollspy>
				</div>
			</div>

			<!-- Column 2: Sequential Page Layout -->
			<div class="lg:w-3/4 xl:w-3/4 2xl:w-3/4 3xl:w-4/5 flex-1 py-4">
				{{ template "_piece_sequential_layout" . }}
			</div>
		</div>
	</div>

	<!-- Scroll to top button -->
	<scroll-to-top-button></scroll-to-top-button>
{{ else }}
	<!-- No images fallback with debug info -->
	<div class="container mx-auto px-4 py-8">
		<div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
			<h2 class="text-xl font-semibold text-yellow-800 mb-2">Keine Bilder verfügbar</h2>
			<p class="text-yellow-700 mb-4">
				Für diesen Beitrag sind derzeit keine Seitenbilder verfügbar.
			</p>

		</div>
	</div>
{{ end }}