{#
  _macros/carousel.html
  ─────────────────────
  Provides two macros for image display:

    gallery(images, image_endpoint, title='', show_badges=true)
      Single-garment hero + thumbnail strip.
      images:         list of dicts — {filename, front, back, model}
      image_endpoint: Flask endpoint name that accepts filename=
                      e.g. 'wardrobe.image'
      title:          alt text for the hero image
      show_badges:    if true, show Front/Back/Model labels on thumbs

    carousel(images, image_endpoint)
      Multi-image horizontal scrolling strip with lightbox on click.
      images:         list of filename strings (pre-ordered, pre-deduped)
      image_endpoint: same as above

  Both macros require carousel.css and carousel.js (loaded via base.html).
  Import with context so url_for is available:

    {% from '_macros/carousel.html' import gallery, carousel with context %}
#}


{# ──────────────────────────────────────────────────────────────────
   gallery — hero image + thumbnail strip
   ────────────────────────────────────────────────────────────────── #}
{% macro gallery(images, image_endpoint, title='', show_badges=true) %}
  {% if images %}
    {% set hero = images[0] %}
    <div class="cs-gallery">
      {# Hero #}
      <div class="cs-hero-wrap" role="button" aria-label="Open full-screen" tabindex="0">
        <img
          class="cs-hero-img"
          src="{{ url_for(image_endpoint, filename=hero.filename) }}"
          alt="{{ title }}"
        />
        {% if show_badges %}
          {% if hero.model and hero.front %}
            <span class="cs-badge">Model · Front</span>
          {% elif hero.model %}
            <span class="cs-badge">Model</span>
          {% elif hero.front %}
            <span class="cs-badge">Front</span>
          {% endif %}
        {% endif %}
        {% if images|length > 1 %}
          <button class="cs-nav-btn cs-nav-btn--prev" aria-label="Previous image">&#8249;</button>
          <button class="cs-nav-btn cs-nav-btn--next" aria-label="Next image">&#8250;</button>
        {% endif %}
      </div>

      {# Thumbnail strip #}
      {% if images|length > 1 %}
        <div class="cs-thumbs" role="list">
          {% for img in images %}
            <button
              class="cs-thumb{% if loop.first %} cs-thumb--active{% endif %}"
              data-src="{{ url_for(image_endpoint, filename=img.filename) }}"
              data-alt="{{ img.filename }}"
              role="listitem"
              aria-label="View image {{ loop.index }}"
            >
              <img
                src="{{ url_for(image_endpoint, filename=img.filename) }}"
                alt="Thumbnail {{ loop.index }}"
                loading="lazy"
              />
              {% if show_badges %}
                {% if img.front and img.back %}
                  <span class="cs-thumb-label">Side</span>
                {% elif img.front %}
                  <span class="cs-thumb-label">Front</span>
                {% elif img.back %}
                  <span class="cs-thumb-label">Back</span>
                {% elif img.model %}
                  <span class="cs-thumb-label">Model</span>
                {% endif %}
              {% endif %}
            </button>
          {% endfor %}
        </div>
      {% endif %}
    </div>
  {% else %}
    <div class="cs-gallery-empty">No images recorded</div>
  {% endif %}
{% endmacro %}


{# ──────────────────────────────────────────────────────────────────
   carousel — horizontal sliding strip with lightbox
   ────────────────────────────────────────────────────────────────── #}
{% macro carousel(images, image_endpoint) %}
  {% if images %}
    <div class="cs-carousel">
      <button class="cs-arrow cs-arrow--prev" aria-label="Previous">&#8249;</button>
      <div class="cs-carousel-wrap">
        <div class="cs-track">
          {% for filename in images %}
            <div
              class="cs-slide{% if loop.first %} cs-slide--active{% endif %}"
              data-index="{{ loop.index0 }}"
              data-src="{{ url_for(image_endpoint, filename=filename) }}"
            >
              <img
                src="{{ url_for(image_endpoint, filename=filename) }}"
                alt="Image {{ loop.index }}"
                loading="{% if loop.index <= 4 %}eager{% else %}lazy{% endif %}"
              />
            </div>
          {% endfor %}
        </div>
      </div>
      <button class="cs-arrow cs-arrow--next" aria-label="Next">&#8250;</button>
    </div>
  {% else %}
    <p class="cs-carousel-empty">No images recorded.</p>
  {% endif %}
{% endmacro %}