<?php

declare(strict_types=1);

/**
 * Bildergalerie einer Veranstaltung: Raster aus Vorschaubildern, Klick öffnet
 * das Bild groß. Props:
 *   $bilder array [{base, widths, alt, source?}, …] (script-verwaltet,
 *           bin/veranstaltung-bilder.php)
 *   $title  string (optional, Default 'Bilder')
 *
 * Progressive enhancement: jedes Vorschaubild ist ein normaler Link auf die
 * größte Variante der Datei — ohne JS führt der Klick einfach zum Bild. Mit JS
 * fängt assets/js/lightbox.js den Klick ab und zeigt es im Overlay
 * (Vor/Zurück, Pfeiltasten, Esc). Das Overlay-Markup steht am Ende und ist
 * `hidden`, bis JS es übernimmt.
 *
 * Die Overlay-Grafik erbt ihr srcset vom angeklickten Vorschaubild (siehe
 * lightbox.js) — deshalb braucht der Link hier keine zweite Bildliste.
 */
$bilder = $bilder ?? [];
$title = $title ?? 'Bilder';

if ($bilder === []) {
    return;
}

$anzahl = count($bilder);
?>
        <section class="section veranstaltung-galerie" id="bilder" data-lightbox-gallery>
            <div class="container">
                <h2><?= e($title) ?></h2>
                <ul class="veranstaltung-galerie__grid">
<?php foreach ($bilder as $i => $bild): ?>
<?php
    $gross = asset($bild['base'] . '-' . max($bild['widths']) . '.jpg');
?>
                    <li class="veranstaltung-galerie__item">
                        <a class="veranstaltung-galerie__link" href="<?= e($gross) ?>" data-lightbox="<?= $i ?>">
<?php component('img', [
    'image' => $bild,
    'sizes' => '(max-width: 600px) 45vw, (max-width: 992px) 30vw, 22vw',
    'class' => 'veranstaltung-galerie__img',
]); ?>
                            <span class="visually-hidden">(größer ansehen)</span>
                        </a>
                    </li>
<?php endforeach; ?>
                </ul>
            </div>
<?php component('lightbox-overlay', ['label' => $title, 'count' => $anzahl]); ?>
        </section>
