<?php require BASE_PATH . '/app/Views/layouts/header.php'; ?>

<section class="page-hero">
  <div class="container">
    <span class="eyebrow">Galeri Foto</span>
    <h1><?= htmlspecialchars($album['judul']) ?></h1>
    <?php if (!empty($album['deskripsi'])): ?>
      <p style="color:var(--text-muted); max-width:600px; margin:14px auto 0;"><?= htmlspecialchars($album['deskripsi']) ?></p>
    <?php endif; ?>
  </div>
</section>

<section class="galeri-page">
  <div class="container">
    <div style="margin-bottom:24px;">
      <a href="<?= APP_URL ?>/galeri-foto" class="btn btn-outline">&larr; Kembali ke Galeri</a>
    </div>

    <?php if (empty($daftarFoto)): ?>
      <p style="color:var(--text-muted); text-align:center; padding:40px 0;">Belum ada foto di album ini.</p>
    <?php else: ?>
      <div class="foto-grid">
        <?php foreach ($daftarFoto as $i => $foto): ?>
          <a href="<?= APP_URL . '/uploads/galeri/' . htmlspecialchars($foto['gambar']) ?>" class="foto-item" data-lightbox="album" title="<?= htmlspecialchars($foto['caption'] ?? '') ?>">
            <img src="<?= APP_URL . '/uploads/galeri/' . htmlspecialchars($foto['gambar']) ?>" alt="<?= htmlspecialchars($foto['caption'] ?? $album['judul']) ?>" loading="lazy">
          </a>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>
</section>

<!-- Lightbox sederhana tanpa library eksternal -->
<div id="lightbox-overlay" class="lightbox-overlay">
  <span class="lightbox-close">&times;</span>
  <img id="lightbox-img" src="" alt="">
</div>
<script>
  document.querySelectorAll('.foto-item').forEach(function (link) {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      document.getElementById('lightbox-img').src = this.getAttribute('href');
      document.getElementById('lightbox-overlay').classList.add('active');
    });
  });
  document.querySelector('.lightbox-close').addEventListener('click', function () {
    document.getElementById('lightbox-overlay').classList.remove('active');
  });
  document.getElementById('lightbox-overlay').addEventListener('click', function (e) {
    if (e.target === this) this.classList.remove('active');
  });
</script>

<?php require BASE_PATH . '/app/Views/layouts/footer.php'; ?>
