{{ $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-x-2">
			{{ template "_historical_layout" (dict "pages" $pages "pageCount" $pageCount "isBeilage" false "targetPage" $.targetPage) }}
		</div>
	{{ end }}


	<!-- Beilage Pages -->
	{{ range $beilageNum, $beilagePages := $images.AdditionalPages }}
		{{ if $beilagePages }}
			<div class="mt-12 pt-8">
				<!-- Header for beilage -->
				<div id="beilage" 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-x-2">
					{{ template "_historical_layout" (dict "pages" $beilagePages "pageCount" $pageCount "isBeilage" true "targetPage" $.targetPage) }}
				</div>
			</div>
		{{ end }}
	{{ end }}
</div>

<!-- Modal for enlarged view -->
{{ template "_page_modal" }}



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

	{{ if eq $pageCount 2 }}
		<!-- 2 pages: [1] [2] -->
		{{ template "_render_page" (dict "page" (index $pages 0) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_page" (dict "page" (index $pages 1) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
	{{ 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 "targetPage" $targetPage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
	{{ 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 "targetPage" $targetPage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 3) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_page" (dict "page" (index $pages 4) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_page" (dict "page" (index $pages 5) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
	{{ 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 "targetPage" $targetPage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 1) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_page" (dict "page" (index $pages 2) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_page" (dict "page" (index $pages 3) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_page" (dict "page" (index $pages 4) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_page" (dict "page" (index $pages 5) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_empty" "" }}
		{{ template "_render_empty" "" }}
		{{ template "_render_page" (dict "page" (index $pages 6) "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ template "_render_page" (dict "page" (index $pages 7) "position" "left" "isBeilage" $isBeilage "targetPage" $targetPage) }}
		{{ 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 "targetPage" $targetPage) }}
			{{ else }}
				{{ template "_render_page" (dict "page" $page "position" "right" "isBeilage" $isBeilage "targetPage" $targetPage) }}
			{{ end }}
		{{ end }}
	{{ end }}
{{ end }}

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

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

	<div class="newspaper-page-container pt-4" id="{{ $idPrefix }}-{{ $page.PageNumber }}" data-page-container="{{ $page.PageNumber }}" data-page-icon-type="{{ $page.PageIcon }}"{{ if $isBeilage }} data-beilage="true"{{ end }}>
		<!-- Anchor for navigation -->
		<!-- 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>
				<button onclick="enlargePage(document.querySelector('#{{ $idPrefix }}-{{ $page.PageNumber }} .newspaper-page-image'), {{ $page.PageNumber }}, false)" 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>
				<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 relative" data-page="{{ $page.PageNumber }}">
					{{ $page.PageNumber }}
					{{ if $isBeilage }}<span class="text-amber-600">{{ PageIcon $page.PageIcon }}</span>{{ else }}{{ PageIcon $page.PageIcon }}{{ end }}
					{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage "isBeilage" $isBeilage "isTargetBeilage" $.isBeilage) }}
				</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 relative" data-page="{{ $page.PageNumber }}">
					{{ if $isBeilage }}<span class="text-amber-600">{{ PageIcon $page.PageIcon }}</span>{{ else }}{{ PageIcon $page.PageIcon }}{{ end }}
					{{ $page.PageNumber }}
					{{ template "_page_link_indicator" (dict "pageNumber" $page.PageNumber "targetPage" $targetPage "isBeilage" $isBeilage "isTargetBeilage" $.isBeilage) }}
				</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>
				<button onclick="enlargePage(document.querySelector('#{{ $idPrefix }}-{{ $page.PageNumber }} .newspaper-page-image'), {{ $page.PageNumber }}, false)" 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>
			{{ 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-zoom-in 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 }}
