---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import GalleryPhoto from '@shared/components/cards/GalleryPhoto.astro'
import Pagination from '@ui/Pagination.astro'
import photos from '@data/photos.json'
import { people } from '@shared/lib/people'
import { requireIndex } from '@shared/lib/array'
import HeaderActionsPhotos from '@shared/components/layout/HeaderActionsPhotos.astro'

const galleryPhotos = photos.filter((photo) => photo.horizontal).slice(0, 15)
---

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

  <div class="d-flex mt-5">
    <Pagination count={5} activeItem={3} class="ms-auto" />
  </div>
</DefaultLayout>