{{ $model := .model }}
{{ $images := $model.Images }}

<div class="space-y-8 h-full relative" id="newspaper-content">
	<!-- Main Issue Pages -->
	{{ if $images.MainPages }}
		{{ $pages := $images.MainPages }}
		{{ $pageCount := len $pages }}

		<!-- Historical printing layout grid -->
		<div class="grid grid-cols-2 gap-4">
			{{ template "_historical_layout" (dict "pages" $pages "pageCount" $pageCount "isBeilage" false) }}
		</div>
	{{ end }}


	<!-- Beilage Pages -->
	{{ range $beilageNum, $beilagePages := $images.AdditionalPages }}
		{{ if $beilagePages }}
			<div class="mt-12 pt-8">
				<!-- Header for beilage -->
				<div class="flex items-center gap-3 mb-6 bg-amber-50 px-4 py-3 rounded border border-amber-200">
					<i class="ri-attachment-line text-2xl text-amber-600"></i>
					<h2 class="text-xl font-semibold text-slate-800">Beilage</h2>
				</div>
				{{ $pageCount := len $beilagePages }}

				<!-- Historical printing layout grid for Beilage -->
				<div class="grid grid-cols-2 gap-4">
					{{ template "_historical_layout" (dict "pages" $beilagePages "pageCount" $pageCount "isBeilage" true) }}
				</div>
			</div>
		{{ end }}
	{{ end }}
</div>

<!-- Modal for enlarged view - positioned within newspaper content -->
<div
	id="pageModal"
	class="absolute 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>



<!-- Historical printing layout template -->
{{ define "_historical_layout" }}
	{{ $pages := .pages }}
	{{ $pageCount := .pageCount }}
	{{ $isBeilage := .isBeilage }}

	{{ if eq $pageCount 2 }}
		<!-- 2 pages: [1] [2] -->
		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_page" (dict "page" (index $pages 1) "position" "right" "isBeilage" $isBeilage) }}
	{{ else if eq $pageCount 4 }}
		<!-- 4 pages: [1] [_] \n [2] [3] \n [_] [4] -->
		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage) }}
	{{ else if eq $pageCount 6 }}
		<!-- 6 pages: [1] [_] \n [2] [3] \n [_] [4] \n [5] [6] -->
		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage) }}
		{{ template "_render_page" (dict "page" (index $pages 4) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_page" (dict "page" (index $pages 5) "position" "right" "isBeilage" $isBeilage) }}
	{{ else if eq $pageCount 8 }}
		<!-- 8 pages: [1] [_] \n [2] [3] \n [4] [5] \n [6] [_] \n [_] [7] \n [8] [_] -->
		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage) }}
		{{ template "_render_page" (dict "page" (index $pages 3) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_page" (dict "page" (index $pages 4) "position" "right" "isBeilage" $isBeilage) }}
		{{ template "_render_page" (dict "page" (index $pages 5) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 6) "position" "right" "isBeilage" $isBeilage) }}
		{{ template "_render_page" (dict "page" (index $pages 7) "position" "left" "isBeilage" $isBeilage) }}
		{{ template "_render_empty" "" }}
	{{ else }}
		<!-- Fallback: side by side layout for other page counts -->
		{{ range $index, $page := $pages }}
			{{ if eq (mod $index 2) 0 }}
				{{ template "_render_page" (dict "page" $page "position" "left" "isBeilage" $isBeilage) }}
			{{ else }}
				{{ template "_render_page" (dict "page" $page "position" "right" "isBeilage" $isBeilage) }}
			{{ end }}
		{{ end }}
	{{ end }}
{{ end }}

<!-- Page rendering template -->
{{ define "_render_page" }}
	{{ $page := .page }}
	{{ $position := .position }}
	{{ $isBeilage := .isBeilage }}
	{{ $isLeft := eq $position "left" }}
	{{ $borderColor := "border-slate-200" }}
	{{ $hoverColor := "hover:border-slate-300" }}
	{{ $bgColor := "bg-blue-50" }}
	{{ $idPrefix := "page" }}
	{{ $linkPrefix := "" }}

	{{ if $isBeilage }}
		{{ $borderColor = "border-amber-200" }}
		{{ $hoverColor = "hover:border-amber-300" }}
		{{ $bgColor = "bg-amber-50" }}
		{{ $idPrefix = "beilage-1-page" }}
		{{ $linkPrefix = "#beilage-1-page-" }}
	{{ else }}
		{{ $linkPrefix = "#page-" }}
	{{ end }}

	<div class="newspaper-page-container" id="{{ $idPrefix }}-{{ $page.PageNumber }}">
		<!-- Page indicator row -->
		<div class="flex {{ if $isLeft }}justify-end{{ else }}justify-start{{ end }} items-center gap-1 mb-2">
			{{ if $isLeft }}
				<!-- Left page: buttons then page number -->
				<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this{{ if $isBeilage }}, true{{ end }})" 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>
				<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
					{{ $page.PageNumber }}
					<i class="ri-file-text-line {{ if $isBeilage }}text-amber-600{{ else }}text-black{{ end }} text-sm scale-x-[-1]"></i>
				</span>
			{{ else }}
				<!-- Right page: page number then buttons -->
				<span class="page-indicator text-sm font-bold text-slate-600 {{ $bgColor }} px-2 py-1 rounded transition-all duration-300 shadow-sm flex items-center gap-1" data-page="{{ $page.PageNumber }}">
					<i class="ri-file-text-line {{ if $isBeilage }}text-amber-600{{ else }}text-black{{ end }} text-sm"></i>
					{{ $page.PageNumber }}
				</span>
				<button onclick="copyPagePermalink('{{ $page.PageNumber }}', this{{ if $isBeilage }}, true{{ end }})" 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>
			{{ end }}
		</div>
		<div class="single-page bg-white p-4 rounded border {{ $borderColor }} {{ $hoverColor }} transition-colors duration-200">
			<img src="{{ $page.ImagePath }}" alt="{{ if $isBeilage }}Beilage 1, {{ end }}Seite {{ $page.PageNumber }}" class="newspaper-page-image cursor-pointer rounded-sm hover:scale-[1.02] transition-transform duration-200" onclick="enlargePage(this, {{ $page.PageNumber }}, false)" data-page="{{ $page.PageNumber }}" loading="lazy" />
		</div>
	</div>
{{ end }}

<!-- Empty space template -->
{{ define "_render_empty" }}
	<div class="newspaper-empty-space"></div>
{{ end }}