<div class="image-viewer-container" role="dialog" aria-modal="true" aria-label="<%= __('image_viewer') %>">
	<button class="image-viewer-close" type="button" aria-label="<%= __('close') %>">
		<i class="fa-solid fa-xmark"></i>
	</button>
	<button class="image-viewer-prev" type="button" aria-label="<%= __('prev') %>">
		<i class="fa-solid fa-chevron-left"></i>
	</button>
	<div class="image-viewer-frame">
		<img src="" alt="">
	</div>
	<div class="image-viewer-exif-panel hidden absolute left-1/2 bottom-20 -translate-x-1/2 w-[min(92vw,420px)] max-h-[60vh] overflow-hidden rounded-2xl bg-background-color-transparent-80 p-4 text-left shadow-redefine-flat backdrop-blur-md" role="dialog" aria-label="<%= __('exif.title') %>" aria-hidden="true">
		<div class="flex items-center justify-between mb-3">
			<span class="text-sm font-semibold text-first-text-color"><%= __('exif.title') %></span>
			<button class="image-viewer-exif-close flex h-8 w-8 items-center justify-center rounded-full bg-background-color-transparent-80 text-first-text-color transition hover:bg-background-color-transparent-40" type="button" aria-label="<%= __('close') %>">
				<i class="fa-solid fa-xmark text-[0.65rem]"></i>
			</button>
		</div>
		<div class="image-viewer-exif-cards grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[50vh] overflow-y-auto pr-1 scrollbar-hide"></div>
		<template class="image-viewer-exif-card-template">
			<div class="rounded-lg bg-background-color-transparent-40 px-3 py-2">
				<div class="image-viewer-exif-card-header flex items-center gap-2 mb-1">
					<i class="image-viewer-exif-card-icon fa-solid fa-circle-info text-xs text-third-text-color"></i>
					<div class="image-viewer-exif-card-title text-xs font-semibold text-first-text-color"></div>
				</div>
				<div class="image-viewer-exif-card-items flex flex-col gap-1"></div>
			</div>
		</template>
	</div>
	<button class="image-viewer-exif-toggle flex items-center gap-2 hidden absolute left-1/2 bottom-6 -translate-x-1/2 rounded-full border border-border-color bg-background-color-transparent-80 px-4 py-2 text-first-text-color backdrop-blur-md transition hover:bg-background-color-transparent-40" type="button" aria-label="<%= __('exif.title') %>" aria-expanded="false">
		<i class="fa-solid fa-circle-info text-xs"></i>
		<span class="text-xs font-semibold uppercase tracking-wider"><%= __('exif.title') %></span>
	</button>
	<button class="image-viewer-next" type="button" aria-label="<%= __('next') %>">
		<i class="fa-solid fa-chevron-right"></i>
	</button>
</div>
