---
// Port of preview/pages/gallery.html (layout: default)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import GalleryPhoto from '@shared/components/cards/GalleryPhoto.astro';
import Pagination from '@shared/components/ui/Pagination.astro';
import photos from '@data/photos.json';
import people from '@data/people.json';

// Liquid: photos | where: "horizontal", true — limit: 15; person = people[forloop.index0]
const galleryPhotos = photos.filter((photo) => photo.horizontal).slice(0, 15);
---

<DefaultLayout
	title="Gallery"
	pageHeader="Gallery"
	description="1-15 of 241 photos"
	actions="photos"
	pageMenu="extra.gallery"
>
	<div class="row row-cards">
		{
			galleryPhotos.map((photo, index) => (
				<div class="col-sm-6 col-lg-4">
					<GalleryPhoto photo={photo} person={people[index]} index={index + 1} />
				</div>
			))
		}
	</div>

	<div class="d-flex mt-5">
		<Pagination class="ms-auto" />
	</div>
</DefaultLayout>