<?php
/* Page Médias — galerie photo groupée par album. Route publique /medias
   (public/index.php) : le routeur ne pré-charge aucune donnée pour cette
   page, donc le gabarit va chercher lui-même ses médias (db()/cms.php sont
   déjà chargés par le routeur) — même schéma que templates/actualites.php
   pour la liste des actualités.

   Lightbox tout en CSS (aucun JavaScript) : chaque vignette est un lien
   ancre vers #media-<id>, qui affiche l'image en plein écran via le
   sélecteur :target (voir public/assets/css/style.css, section « Lightbox
   galerie médias »). */
$albums = cms_medias_par_album(db());
?>

<section class="bandeau-clair">
  <div class="conteneur">
    <div class="section-entete">
      <span class="label-section">Médias</span>
      <h1>La vie à l'ISIT en images</h1>
      <p>Campus, tenues, évènements : un aperçu du quotidien de nos étudiants.</p>
    </div>
  </div>
</section>

<?php if (!$albums): ?>
  <section class="liste-actualites">
    <div class="conteneur">
      <p class="bandeau-info">La galerie sera bientôt enrichie.</p>
    </div>
  </section>
<?php else: ?>
  <?php foreach ($albums as $nomAlbum => $mediasAlbum): ?>
    <section class="vie-isit">
      <div class="conteneur">
        <div class="section-entete">
          <h2><?= htmlspecialchars($nomAlbum) ?></h2>
        </div>
        <div class="grille-galerie">
          <?php foreach ($mediasAlbum as $m): ?>
            <?php $alt = ($m['legende'] ?? '') !== '' ? $m['legende'] : $nomAlbum; ?>
            <figure class="carte-galerie">
              <a href="#media-<?= (int)$m['id'] ?>">
                <div class="cadre-image"><img src="/uploads/medias/<?= htmlspecialchars($m['fichier']) ?>" alt="<?= htmlspecialchars($alt) ?>" loading="lazy"></div>
              </a>
              <?php if (($m['legende'] ?? '') !== ''): ?>
                <figcaption><?= htmlspecialchars($m['legende']) ?></figcaption>
              <?php endif; ?>
            </figure>
            <div id="media-<?= (int)$m['id'] ?>" class="lightbox-cible">
              <div class="lightbox-fond">
                <figure class="lightbox-figure">
                  <img src="/uploads/medias/<?= htmlspecialchars($m['fichier']) ?>" alt="<?= htmlspecialchars($alt) ?>">
                  <?php if (($m['legende'] ?? '') !== ''): ?><figcaption><?= htmlspecialchars($m['legende']) ?></figcaption><?php endif; ?>
                </figure>
                <?php /* Fragment sans élément correspondant : referme la lightbox
                       (plus de :target) sans faire défiler la page en haut, ce que
                       provoquerait href="#" (revue Task 13). */ ?>
                <a class="lightbox-fermer" href="#fermer-<?= (int)$m['id'] ?>" aria-label="Fermer l'image">✕</a>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    </section>
  <?php endforeach; ?>
<?php endif; ?>
