{% extends "website/base.html" %}
{% block title %}Gallery – {{ site.brand_name }}{% endblock %}
{% block content %}
  {% include "website/partials/page_banner.html" with crumb="Gallery" heading="EV" accent="Gallery" %}
  <section class="section">
    <div class="wrap">
      <div class="masonry">
        {% for g in gallery %}
        <figure class="gal gal--grid">
          <button type="button" class="gal__btn" data-lightbox="{{ g.image.url }}" data-caption="{{ g.title }}"><img src="{{ g.image.url }}" alt="{{ g.title }}" loading="lazy"></button>
          <figcaption><span class="badge badge--soft">{{ g.get_category_display }}</span>{{ g.title }}</figcaption>
        </figure>
        {% empty %}<p class="muted">Gallery images will appear here once uploaded.</p>{% endfor %}
      </div>
    </div>
  </section>
  {% load ev_tags %}
  <div class="lightbox" data-lightbox-box hidden><button type="button" class="lightbox__x" data-lightbox-close aria-label="Close">{% icon "x" 26 %}</button><img alt=""><p></p></div>
{% endblock %}