{{ $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 }}

		<div class="space-y-6">

			<!-- First page (single) -->
			{{ if ge $pageCount 1 }}
				{{ $firstPage := index $pages 0 }}
				{{ if $firstPage.Available }}
				<div class="newspaper-page-container">
					<div class="mb-3">
						<div class="flex items-center gap-2 mb-2">
							<i class="ri-file-image-line text-blue-600"></i>
<span class="page-indicator text-sm font-medium text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $firstPage.PageNumber }}">{{ $firstPage.PageNumber }}</span>
						</div>
					</div>
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
						<img src="{{ $firstPage.ImagePath }}"
							 alt="Seite {{ $firstPage.PageNumber }}"
							 class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
							 onclick="enlargePage(this, {{ $firstPage.PageNumber }}, false)"
							 data-page="{{ $firstPage.PageNumber }}"
							 loading="lazy">
					</div>
				</div>
				{{ end }}
			{{ end }}

			<!-- Middle pages (double spread) -->
			{{ if ge $pageCount 4 }}
				{{ $middlePage1 := index $pages 1 }}
				{{ $middlePage2 := index $pages 2 }}
				{{ if and $middlePage1.Available $middlePage2.Available }}
				<div class="newspaper-page-container">
					<div class="mb-3">
						<div class="flex items-center gap-2 mb-2">
							<i class="ri-file-copy-2-line text-green-600"></i>
<span class="page-indicator text-sm font-medium text-slate-600 bg-green-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $middlePage1.PageNumber }}">{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}</span>
						</div>
					</div>
<div class="double-spread bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
						<img src="{{ $middlePage1.ImagePath }}"
							 alt="Seite {{ $middlePage1.PageNumber }}"
							 class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
							 onclick="enlargePage(this, {{ $middlePage1.PageNumber }}, true)"
							 data-page="{{ $middlePage1.PageNumber }}"
							 loading="lazy">
						<img src="{{ $middlePage2.ImagePath }}"
							 alt="Seite {{ $middlePage2.PageNumber }}"
							 class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
							 onclick="enlargePage(this, {{ $middlePage2.PageNumber }}, true)"
							 data-page="{{ $middlePage2.PageNumber }}"
							 loading="lazy">
					</div>
				</div>
				{{ end }}
			{{ end }}

			<!-- Last page (single) -->
			{{ if ge $pageCount 4 }}
				{{ $lastPage := index $pages 3 }}
				{{ if $lastPage.Available }}
				<div class="newspaper-page-container">
					<div class="mb-3">
						<div class="flex items-center gap-2 mb-2">
							<i class="ri-file-image-line text-blue-600"></i>
							<span class="page-indicator text-sm font-medium text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $lastPage.PageNumber }}">{{ $lastPage.PageNumber }}</span>
						</div>
					</div>
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
						<img src="{{ $lastPage.ImagePath }}"
							 alt="Seite {{ $lastPage.PageNumber }}"
							 class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
							 onclick="enlargePage(this, {{ $lastPage.PageNumber }}, false)"
							 data-page="{{ $lastPage.PageNumber }}"
							 loading="lazy">
					</div>
				</div>
				{{ end }}
			{{ end }}
		</div>
	{{ end }}

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

			<!-- First page of beilage -->
			{{ if ge $pageCount 1 }}
				{{ $firstPage := index $beilagePages 0 }}
				{{ if $firstPage.Available }}
				<div class="newspaper-page-container">
					<div class="mb-3">
						<div class="flex items-center gap-2 mb-2">
							<i class="ri-file-image-line text-amber-600"></i>
<span class="text-sm font-medium text-slate-600 bg-amber-50 px-2 py-1 rounded">{{ $firstPage.PageNumber }}</span>
						</div>
					</div>
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
						<img src="{{ $firstPage.ImagePath }}"
							 alt="Beilage {{ $beilageNum }}, Seite {{ $firstPage.PageNumber }}"
							 class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
							 onclick="enlargePage(this, {{ $firstPage.PageNumber }}, false)"
							 data-page="{{ $firstPage.PageNumber }}"
							 loading="lazy">
					</div>
				</div>
				{{ end }}
			{{ end }}

			<!-- If beilage has 4+ pages, show middle spread -->
			{{ if ge $pageCount 4 }}
				{{ $middlePage1 := index $beilagePages 1 }}
				{{ $middlePage2 := index $beilagePages 2 }}
				{{ if and $middlePage1.Available $middlePage2.Available }}
				<div class="newspaper-page-container">
					<h4 class="text-sm font-medium mb-2">Beilage {{ $beilageNum }}, Seiten {{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}</h4>
					<div class="double-spread">
						<img src="{{ $middlePage1.ImagePath }}"
							 alt="Beilage {{ $beilageNum }}, Seite {{ $middlePage1.PageNumber }}"
							 class="newspaper-page-image cursor-pointer border shadow-md"
							 onclick="enlargePage(this, {{ $middlePage1.PageNumber }}, true)"
							 loading="lazy">
						<img src="{{ $middlePage2.ImagePath }}"
							 alt="Beilage {{ $beilageNum }}, Seite {{ $middlePage2.PageNumber }}"
							 class="newspaper-page-image cursor-pointer border shadow-md"
							 onclick="enlargePage(this, {{ $middlePage2.PageNumber }}, true)"
							 loading="lazy">
					</div>
				</div>
				{{ end }}
			{{ else if eq $pageCount 2 }}
				<!-- If only 2 pages, show as spread -->
				{{ $page2 := index $beilagePages 1 }}
				{{ if $page2.Available }}
				<div class="newspaper-page-container">
					<h4 class="text-sm font-medium mb-2">Beilage {{ $beilageNum }}, Seite {{ $page2.PageNumber }}</h4>
					<div class="single-page">
						<img src="{{ $page2.ImagePath }}"
							 alt="Beilage {{ $beilageNum }}, Seite {{ $page2.PageNumber }}"
							 class="newspaper-page-image cursor-pointer border shadow-md"
							 onclick="enlargePage(this, {{ $page2.PageNumber }}, false)"
							 loading="lazy">
					</div>
				</div>
				{{ end }}
			{{ end }}

			<!-- Last page of beilage (if 4+ pages) -->
			{{ if ge $pageCount 4 }}
				{{ $lastPage := index $beilagePages 3 }}
				{{ if $lastPage.Available }}
				<div class="newspaper-page-container">
					<h4 class="text-sm font-medium mb-2">Beilage {{ $beilageNum }}, Seite {{ $lastPage.PageNumber }}</h4>
					<div class="single-page">
						<img src="{{ $lastPage.ImagePath }}"
							 alt="Beilage {{ $beilageNum }}, Seite {{ $lastPage.PageNumber }}"
							 class="newspaper-page-image cursor-pointer border shadow-md"
							 onclick="enlargePage(this, {{ $lastPage.PageNumber }}, false)"
							 loading="lazy">
					</div>
				</div>
				{{ end }}
			{{ end }}
		</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>

<style>
.newspaper-page-container {
	margin-bottom: 2rem;
}

.single-page {
	display: flex;
	justify-content: center;
}

.single-page .newspaper-page-image {
	max-width: min(400px, 100%);
	width: 100%;
	height: auto;
}

.double-spread {
	display: flex;
	gap: 1rem;
	justify-content: center;
	width: 100%;
}

.double-spread .newspaper-page-image {
	max-width: min(350px, 48%);
	width: 100%;
	height: auto;
	flex: 1;
}

/* Larger screens - maximize available space */
@media (min-width: 1280px) {
	.single-page .newspaper-page-image {
		max-width: min(600px, 100%);
	}

	.double-spread .newspaper-page-image {
		max-width: min(500px, 48%);
	}
}

/* Very wide screens - take advantage of the full width */
@media (min-width: 1536px) {
	.single-page .newspaper-page-image {
		max-width: min(700px, 100%);
	}

	.double-spread .newspaper-page-image {
		max-width: min(600px, 48%);
	}
}

/* Medium screens */
@media (max-width: 1024px) {
	.double-spread {
		flex-direction: column;
		align-items: center;
	}

	.double-spread .newspaper-page-image {
		max-width: 400px;
		width: 100%;
	}
}

/* Mobile */
@media (max-width: 640px) {
	.single-page .newspaper-page-image,
	.double-spread .newspaper-page-image {
		max-width: 100%;
	}
}
</style>

<script>
// Initialize page tracking
document.addEventListener('DOMContentLoaded', function() {
	// Get all page containers
	const pageContainers = document.querySelectorAll('.newspaper-page-container');

	// Set up intersection observer for active page tracking
	const observer = new IntersectionObserver((entries) => {
		entries.forEach((entry) => {
			if (entry.isIntersecting) {
				// Get page number from the container
				const pageImg = entry.target.querySelector('img[data-page]');
				if (pageImg) {
					const pageNumber = pageImg.getAttribute('data-page');
					markCurrentPageInInhaltsverzeichnis(pageNumber);
				}
			}
		});
	}, {
		rootMargin: '-20% 0px -70% 0px' // Trigger when page is mostly in view
	});

	// Observe all page containers
	pageContainers.forEach(container => {
		observer.observe(container);
	});
});

function markCurrentPageInInhaltsverzeichnis(pageNumber) {
	// Reset all entries in Inhaltsverzeichnis
	document.querySelectorAll('.inhalts-entry').forEach(entry => {
		entry.classList.remove('bg-red-100', 'border-red-300');
		entry.classList.add('bg-slate-50');
	});

	// Find and highlight the current page entry
	const pageEntry = document.querySelector(`.inhalts-entry[data-page="${pageNumber}"]`);
	if (pageEntry) {
		pageEntry.classList.remove('bg-slate-50');
		pageEntry.classList.add('bg-red-100', 'border-red-300');
	}

	// Also highlight page indicators
	document.querySelectorAll('.page-indicator').forEach(indicator => {
		indicator.classList.remove('bg-red-500', 'text-white');
		indicator.classList.add('bg-blue-50', 'text-slate-600');
	});

	const pageIndicator = document.querySelector(`.page-indicator[data-page="${pageNumber}"]`);
	if (pageIndicator) {
		pageIndicator.classList.remove('bg-blue-50', 'bg-green-50', 'text-slate-600');
		pageIndicator.classList.add('bg-red-500', 'text-white');
	}
}

function enlargePage(imgElement, pageNumber, isFromSpread) {
	const modal = document.getElementById('pageModal');
	const modalImage = document.getElementById('modalImage');

	modalImage.src = imgElement.src;
	modalImage.alt = imgElement.alt;

	modal.classList.remove('hidden');

	// Mark current page when enlarged
	markCurrentPageInInhaltsverzeichnis(pageNumber);
}

function closeModal() {
	const modal = document.getElementById('pageModal');
	modal.classList.add('hidden');
}

// Close modal on Escape key
document.addEventListener('keydown', function(e) {
	if (e.key === 'Escape') {
		closeModal();
	}
});
</script>