{% extends "base.html" %}
{% block title %}Gallery | {{ settings.event_title }}{% endblock %}
{% block content %}
<div class="gallery-page-shell">

  <!-- Continuous arena energy layer (decorative only) -->
  <div class="gallery-fx-layer" aria-hidden="true">
    <div class="gx-conduit gx-c1"><i class="gx-pulse"></i><i class="gx-pulse p2"></i></div>
    <div class="gx-conduit gx-c2"><i class="gx-pulse"></i></div>
    <div class="gx-conduit gx-c3"><i class="gx-pulse p2"></i><i class="gx-pulse p3"></i></div>
    <div class="gx-conduit gx-c4"><i class="gx-pulse"></i></div>
    <div class="gx-conduit gx-c5 diag"><i class="gx-pulse"></i></div>
    <i class="gx-spark gx-s1"></i>
    <i class="gx-spark gx-s2"></i>
    <i class="gx-spark gx-s3"></i>
    <i class="gx-spark gx-s4"></i>
    <i class="gx-spark gx-s5"></i>
    <i class="gx-spark gx-s6"></i>
  </div>

<section class="page-head center gallery-page-head">
  <div class="wrap reveal">
    <p class="eyebrow">Gallery</p>
    <h1>Event Memories</h1>
    <p class="lead">A visual archive of Nexora matches, winners, crowd moments, and behind-the-scenes highlights.</p>
  </div>
</section>

<section class="section gallery-page-section">
  <div class="wrap">
    {% if images %}
    <div class="gallery-grid reveal" data-stagger>
      {% for image in images %}
      {% set gal_i = img(image.image) if image.image else '' %}
      {% if gal_i %}
      <figure class="gallery-card" data-lightbox="{{ url_for('serve_media', filename=gal_i) }}"
        data-title="{{ image.title }}" data-caption="{{ image.caption or '' }}">
        <div class="gallery-media">
          <img src="{{ url_for('serve_media', filename=gal_i) }}" alt="{{ image.title }}" loading="lazy">
        </div>
        <figcaption>
          <strong>{{ image.title }}</strong>
          {% if image.caption %}<span>{{ image.caption }}</span>{% endif %}
        </figcaption>
      </figure>
      {% endif %}
      {% endfor %}
    </div>
    {% else %}
    <div class="empty"><i class="fas fa-images"></i>No images have been uploaded yet. Add images from Admin → Gallery &amp; Covers.</div>
    {% endif %}
  </div>
</section>

</div>
{% endblock %}