<?php

declare(strict_types=1);

/**
 * Overlay für die Bild-Großansicht. Props:
 *   $label string       Bezeichnung des Dialogs (Screenreader)
 *   $count int          Anzahl der Bilder — bei genau einem gibt es weder
 *                       Zähler noch Vor/Zurück (wäre beides sinnlos)
 *
 * Gehört IMMER in denselben [data-lightbox-gallery]-Container wie die
 * zugehörigen Bildlinks (assets/js/lightbox.js sucht von dort aus). Steht
 * `hidden` im Markup, bis JS es übernimmt — ohne JS bleiben die
 * Vorschaubilder normale Links auf die Bilddatei.
 */
$label = $label ?? 'Bild in Großansicht';
$count = $count ?? 0;
$mehrere = $count > 1;
?>
            <div class="lightbox" role="dialog" aria-modal="true" aria-label="<?= e($label) ?>" data-lightbox-dialog hidden>
<?php /* Keine sichtbare Bildunterschrift (Beschluss 30.07.2026): der Alt-Text
         trägt die Beschreibung. sizes steht statisch, das srcset erbt das Bild
         vom angeklickten Vorschaubild (lightbox.js). */ ?>
                <img class="lightbox__img" src="" alt="" sizes="100vw" data-lightbox-img>
<?php if ($mehrere): ?>
                <p class="lightbox__counter" aria-live="polite">
                    <span data-lightbox-current>1</span> von <?= (int) $count ?>
                </p>
<?php endif; ?>
                <button class="btn btn--icon lightbox__btn lightbox__close" type="button" data-lightbox-close aria-label="Ansicht schließen">
                    <?= icon('x-lg') ?>
                </button>
<?php if ($mehrere): ?>
                <button class="btn btn--icon lightbox__btn lightbox__prev" type="button" data-lightbox-prev aria-label="Vorheriges Bild">
                    <?= icon('chevron-left') ?>
                </button>
                <button class="btn btn--icon lightbox__btn lightbox__next" type="button" data-lightbox-next aria-label="Nächstes Bild">
                    <?= icon('chevron-right') ?>
                </button>
<?php endif; ?>
            </div>
