---
// Port of preview/pages/lightbox.html (layout: default).
// Liquid: photos | where: "horizontal", true — the gallery iterates the filtered
// list for both the fslightbox href and the Photo include.
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Photo from '@shared/components/ui/Photo.astro';
import photos from '@data/photos.json';

const filteredPhotos = photos.filter((photo) => photo.horizontal);
---

<DefaultLayout
	title="Lightbox"
	pageHeader="Lightbox"
	pageMenu="plugins.lightbox"
	pageLibs={['fslightbox']}
>
	<div class="row row-cols-3 row-cols-md-4 row-cols-lg-6 g-3">
		{
			filteredPhotos.map((photo) => (
				<div class="col">
					<a data-fslightbox="gallery" href={`./static/photos/${photo.file}`}>
						<Photo photo={photo} class="rounded border" ratio="1x1" />
					</a>
				</div>
			))
		}
	</div>
</DefaultLayout>