{{- /*
    Shared Page Modal Component
    Modal for enlarged page viewing used by both issue and piece pages

    Usage: {{ template "_page_modal" }}
*/ -}}

<!-- Modal for enlarged view -->
<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>