{{ $model := .model }}

<!-- Sequential page layout for piece view -->

	<div class="space-y-8 h-full relative" id="piece-content">
		{{ if $model.Images.AllPages }}
			<!-- Two-column newspaper layout -->
			<div class="grid grid-cols-2 gap-4">
				{{ range $pageIndex, $page := $model.Images.AllPages }}
					{{ $pageEntry := index $model.AllPages $pageIndex }}
					{{- $issueKey := printf "%d-%d" $pageEntry.IssueYear $pageEntry.IssueNumber -}}
					{{- $issueData := GetIssue $issueKey -}}
					{{- $issueContext := "" -}}
					{{- if $issueData -}}
						{{- $issueContext = printf "%d.%d.%d Nr. %d" $issueData.Datum.When.Day $issueData.Datum.When.Month $issueData.Datum.When.Year $pageEntry.IssueNumber -}}
					{{- else -}}
						{{- $issueContext = printf "%d Nr. %d" $pageEntry.IssueYear $pageEntry.IssueNumber -}}
					{{- end -}}

					<!-- Page container -->
					<div class="piece-page-container newspaper-page-container" id="piece-page-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}">
						<!-- Page indicator row -->
						<div class="flex justify-start items-center gap-2 mb-3">
							<span class="part-number bg-slate-100 text-slate-800 text-sm font-bold px-1.5 py-0.5 rounded border border-slate-400 flex items-center justify-center">
								{{ $pageEntry.PartNumber }}. Teil
							</span>
							<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300 flex items-center gap-1 relative" data-page="{{ $page.PageNumber }}">
								{{ $issueContext }}, {{ $page.PageNumber }}
								{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $.targetPage) }}
							</span>

							<!-- Action buttons -->
							<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this)"
									class="w-6 h-6 bg-blue-100 hover:bg-blue-200 text-blue-700 border border-blue-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
									title="Link zu Seite {{ $page.PageNumber }} kopieren">
								<i class="ri-share-line text-xs"></i>
							</button>

							<button onclick="generatePageCitation('{{ $page.PageNumber }}', this)"
									class="w-6 h-6 bg-green-100 hover:bg-green-200 text-green-700 border border-green-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
									title="Zitation für Seite {{ $page.PageNumber }} generieren">
								<i class="ri-file-text-line text-xs"></i>
							</button>

							<button onclick="enlargePage(document.querySelector('#piece-page-{{ $page.PageNumber }} .piece-page-image'), {{ $page.PageNumber }}, false, {{ $pageEntry.PartNumber }})"
									class="w-6 h-6 bg-purple-100 hover:bg-purple-200 text-purple-700 border border-purple-300 rounded flex items-center justify-center transition-colors duration-200 cursor-pointer"
									title="Seite {{ $page.PageNumber }} vergrößern">
								<i class="ri-zoom-in-line text-xs"></i>
							</button>
						</div>

						<!-- Page image -->
						<div class="single-page bg-white p-4 rounded border border-slate-200 hover:border-slate-300 transition-colors duration-200">
							{{ if $page.Available }}
								<img src="{{ $page.ImagePath }}"
									 alt="Seite {{ $page.PageNumber }} ({{ $issueContext }})"
									 class="piece-page-image newspaper-page-image cursor-zoom-in rounded-sm hover:scale-[1.02] transition-transform duration-200 w-full"
									 onclick="enlargePage(this, {{ $page.PageNumber }}, false, {{ $pageEntry.PartNumber }})"
									 data-page="{{ $page.PageNumber }}"
									 loading="lazy" />
							{{ else }}
								<div class="bg-slate-100 border border-slate-200 rounded p-8 text-center">
									<i class="ri-image-line text-4xl text-slate-400 mb-2 block"></i>
									<p class="text-slate-500">Bild nicht verfügbar</p>
								</div>
							{{ end }}
						</div>

					</div>
				{{ end }}
			</div>
		{{ else }}
			<!-- No pages available -->
			<div class="text-center text-slate-500 py-16">
				<i class="ri-file-list-line text-6xl mb-4 block"></i>
				<h3 class="text-xl font-semibold mb-2">Keine Seiten verfügbar</h3>
				<p>Für diesen Beitrag sind derzeit keine Seitenbilder verfügbar.</p>
			</div>
		{{ end }}
	</div>

	<!-- Modal for enlarged view - reuse existing modal -->
	<div
		id="pageModal"
		class="fixed inset-0 bg-black bg-opacity-75 hidden z-50 flex items-center justify-center backdrop-blur-sm"
		onclick="closeModal()">
		<div class="relative max-w-full max-h-full p-4">
			<img id="modalImage" src="" alt="" class="max-w-full max-h-full object-contain rounded-lg" />
			<button
				onclick="closeModal()"
				class="absolute top-2 right-2 text-white bg-slate-800 bg-opacity-80 rounded-full w-10 h-10 flex items-center justify-center hover:bg-opacity-100 transition-all duration-200">
				<i class="ri-close-line text-xl"></i>
			</button>
		</div>
	</div>