<?php
/**
 * Page galerie : fil d'Ariane + intro + grille d'images (lightbox + lazy-load).
 * @var array<string,mixed> $gallery
 * @var list<array<string,mixed>> $images
 * @var int  $batchSize
 * @var bool $lazyEnabled
 */
$gid = (int) $gallery['id'];
?>
<nav class="breadcrumb-nav" aria-label="Fil d'Ariane">
    <a href="<?= e(base_url('/')) ?>">Accueil</a>
    <span class="sep">&rsaquo;</span>
    <span class="current"><?= e($gallery['title']) ?></span>
</nav>

<h1 class="gallery-title"><?= e($gallery['title']) ?></h1>

<?php if (!empty($gallery['intro_html'])): ?>
    <div class="gallery-intro"><?= $gallery['intro_html'] ?></div>
<?php endif; ?>

<?php if (!empty($images)): ?>
    <div class="portfolio-grid">
        <?php foreach ($images as $i => $img): ?>
            <?php
            $file      = (string) $img['filename'];
            $thumbJpg  = media_url($gid, $file, 'thumb');
            $thumbWebp = media_url($gid, $file, 'thumb', true);
            $full      = media_url($gid, $file, 'fullscreen');
            $eager     = !$lazyEnabled || $i < $batchSize;
            $alt       = (string) ($img['alt'] ?? '');
            if ($alt === '') {
                $alt = (string) $img['name'];
            }
            ?>
            <a class="portfolio-item glightbox" href="<?= e($full) ?>"
               data-gallery="g<?= $gid ?>" data-glightbox="title: <?= e($img['name']) ?>">
                <picture>
                    <source type="image/webp" <?= $eager ? 'srcset' : 'data-srcset' ?>="<?= e($thumbWebp) ?>">
                    <img <?= $eager ? 'src' : 'data-src' ?>="<?= e($thumbJpg) ?>"
                         alt="<?= e($alt) ?>" width="<?= (int) $img['width'] ?>" height="<?= (int) $img['height'] ?>" loading="lazy">
                </picture>
            </a>
        <?php endforeach; ?>
    </div>
<?php else: ?>
    <p class="empty">Cette galerie ne contient pas encore d'images.</p>
<?php endif; ?>
