---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Photo from '@shared/components/ui/Photo.astro';
import photos from '@data/photos.json';

// fslightbox loads as a page library (no custom init script on this page).
---

<DefaultLayout
	title="Photogrid"
	pageHeader="Photogrid"
	pageMenu="extra.photogrid"
	pageLibs={['fslightbox']}
>
	<div class="row g-2 g-md-3">
		<div class="col-lg-6">
			<div class="row g-2 g-md-3">
				<div class="col-12">
					<a data-fslightbox="gallery" href={`./static/photos/${photos[5].file}`}>
						<Photo photo={photos[5]} class="rounded-3 border" ratio="3x1" />
					</a>
				</div>
				<div class="col-6">
					<a data-fslightbox="gallery" href={`./static/photos/${photos[6].file}`}>
						<Photo photo={photos[6]} class="rounded-3 border" ratio="1x1" />
					</a>
				</div>
				<div class="col-6">
					<div class="row g-2 g-md-3">
						<div class="col-6">
							<a data-fslightbox="gallery" href={`./static/photos/${photos[7].file}`}>
								<Photo photo={photos[7]} class="rounded-3 border" ratio="1x1" />
							</a>
						</div>
						<div class="col-6">
							<a data-fslightbox="gallery" href={`./static/photos/${photos[8].file}`}>
								<Photo photo={photos[8]} class="rounded-3 border" ratio="1x1" />
							</a>
						</div>
						<div class="col-6">
							<a data-fslightbox="gallery" href={`./static/photos/${photos[9].file}`}>
								<Photo photo={photos[9]} class="rounded-3 border" ratio="1x1" />
							</a>
						</div>
						<div class="col-6">
							<a data-fslightbox="gallery" href={`./static/photos/${photos[10].file}`}>
								<Photo photo={photos[10]} class="rounded-3 border" ratio="1x1" />
							</a>
						</div>
					</div>
				</div>
				<div class="col-12">
					<a data-fslightbox="gallery" href={`./static/photos/${photos[16].file}`}>
						<Photo photo={photos[16]} class="rounded-3 border" ratio="4x1" />
					</a>
				</div>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="row g-2 g-md-3">
				<div class="col-6">
					<div class="row g-2 g-md-3">
						<div class="col-6">
							<a data-fslightbox="gallery" href={`./static/photos/${photos[14].file}`}>
								<Photo photo={photos[14]} class="rounded-3 border" ratio="1x1" />
							</a>
						</div>
						<div class="col-6">
							<a data-fslightbox="gallery" href={`./static/photos/${photos[15].file}`}>
								<Photo photo={photos[15]} class="rounded-3 border" ratio="1x1" />
							</a>
						</div>
						<div class="col-6">
							<a data-fslightbox="gallery" href={`./static/photos/${photos[12].file}`}>
								<Photo photo={photos[12]} class="rounded-3 border" ratio="1x1" />
							</a>
						</div>
						<div class="col-6">
							<a data-fslightbox="gallery" href={`./static/photos/${photos[13].file}`}>
								<Photo photo={photos[13]} class="rounded-3 border" ratio="1x1" />
							</a>
						</div>
					</div>
				</div>
				<div class="col-6">
					<a data-fslightbox="gallery" href={`./static/photos/${photos[1].file}`}>
						<Photo photo={photos[1]} class="rounded-3 border" ratio="1x1" />
					</a>
				</div>
				<div class="col-12">
					<a data-fslightbox="gallery" href={`./static/photos/${photos[4].file}`}>
						<Photo photo={photos[4]} class="rounded-3 border" ratio="4x1" />
					</a>
				</div>
				<div class="col-12">
					<a data-fslightbox="gallery" href={`./static/photos/${photos[17].file}`}>
						<Photo photo={photos[17]} class="rounded-3 border" ratio="3x1" />
					</a>
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>