<?php

$pageTitle =
    'Gallery - PET SPA';


require BASE_PATH
    . '/app/views/layouts/header.php';

require BASE_PATH
    . '/app/views/layouts/navbar.php';

?>


<main>

    <section class="gallery-public-hero">

        <div class="container text-center">

            <span>
                PET SPA GALLERY
            </span>

            <h1>
                Khoảnh khắc đáng yêu
            </h1>

            <p>
                Những hình ảnh từ PET SPA và
                cộng đồng yêu thú cưng.
            </p>

        </div>

    </section>


    <section class="section">

        <div class="container">


            <!-- CATEGORY -->

            <?php if (!empty($categories)): ?>

                <div
                    class="gallery-category-filter"
                >

                    <a
                        href="<?= BASE_URL ?>/?url=gallery"
                        class="<?= $category === ''
                            ? 'active'
                            : ''
                        ?>"
                    >
                        Tất cả
                    </a>


                    <?php foreach (
                        $categories
                        as $galleryCategory
                    ): ?>

                        <a
                            href="<?= BASE_URL ?>/?url=gallery&category=<?= urlencode(
                                $galleryCategory
                            ) ?>"
                            class="<?= $category
                                === $galleryCategory
                                    ? 'active'
                                    : ''
                            ?>"
                        >

                            <?= htmlspecialchars(
                                $galleryCategory
                            ) ?>

                        </a>

                    <?php endforeach; ?>

                </div>

            <?php endif; ?>


            <!-- GRID -->

            <?php if (
                empty($galleryItems)
            ): ?>

                <div
                    class="text-center py-5"
                >

                    <div class="display-5">
                        🐾
                    </div>

                    <h3 class="mt-3">
                        Gallery đang được cập nhật
                    </h3>

                </div>

            <?php else: ?>

                <div
                    class="public-gallery-grid"
                >

                    <?php foreach (
                        $galleryItems
                        as $item
                    ): ?>

                        <article
                            class="public-gallery-item"
                        >

                            <div
                                class="public-gallery-image"
                            >

                                <img
                                    src="<?= BASE_URL ?>/<?= htmlspecialchars(
                                        ltrim(
                                            $item[
                                                'image_path'
                                            ],
                                            '/'
                                        )
                                    ) ?>"
                                    alt="<?= htmlspecialchars(
                                        $item['title']
                                        ?? ''
                                    ) ?>"
                                    loading="lazy"
                                >

                            </div>


                            <?php if (
                                !empty(
                                    $item['title']
                                )

                                || !empty(
                                    $item['caption']
                                )
                            ): ?>

                                <div
                                    class="public-gallery-overlay"
                                >

                                    <?php if (
                                        !empty(
                                            $item['title']
                                        )
                                    ): ?>

                                        <h2>

                                            <?= htmlspecialchars(
                                                $item['title']
                                            ) ?>

                                        </h2>

                                    <?php endif; ?>


                                    <?php if (
                                        !empty(
                                            $item['caption']
                                        )
                                    ): ?>

                                        <p>

                                            <?= htmlspecialchars(
                                                $item['caption']
                                            ) ?>

                                        </p>

                                    <?php endif; ?>

                                </div>

                            <?php endif; ?>

                        </article>

                    <?php endforeach; ?>

                </div>

            <?php endif; ?>


            <!-- PAGINATION -->

            <?php if (
                $totalPages > 1
            ): ?>

                <nav class="mt-5">

                    <ul
                        class="pagination justify-content-center"
                    >

                        <?php for (
                            $i = 1;
                            $i <= $totalPages;
                            $i++
                        ): ?>

                            <li
                                class="page-item <?= $i === $page
                                    ? 'active'
                                    : ''
                                ?>"
                            >

                                <a
                                    class="page-link"
                                    href="<?= BASE_URL ?>/?url=gallery&page=<?= $i ?><?= $category !== ''
                                        ? '&category=' . urlencode(
                                            $category
                                        )
                                        : ''
                                    ?>"
                                >
                                    <?= $i ?>
                                </a>

                            </li>

                        <?php endfor; ?>

                    </ul>

                </nav>

            <?php endif; ?>

        </div>

    </section>

</main>


<?php

require BASE_PATH
    . '/app/views/layouts/footer.php';

?>