{#
  carousel.html — reusable image carousel macro.

  Renders a transform-based sliding strip wired to the shared #cs-lightbox
  (which lives in base.html's overlay block). Clicking any slide opens the
  lightbox; arrows and swipe navigate the strip.

  Usage:
    {% from "_macros/carousel.html" import carousel %}
    {{ carousel(photos, asset_prefix, alt_fallback, slide_width, variant) }}

  Where:
    photos       — iterable of objects with .filename and optional .caption
    asset_prefix — path under ASSETS_BASE up to and including the photos dir,
                   e.g. 'theorganist24/craft/projects/2021_coffee_table/photos'
    alt_fallback — string used for alt text when a photo has no caption
    slide_width  — optional CSS length for slide width (default 220px).
                   e.g. '360px' for a larger finished-photo strip.
    variant      — optional extra class, e.g. 'cs-carousel--large' for a
                   one-at-a-time hero strip.

  Each slide carries data-src (full-size image URL) and data-alt for the
  lightbox. Arrows live inside the wrap so they track the visible image.
#}
{% macro carousel(photos, asset_prefix, alt_fallback='', slide_width=None, variant='') %}
  <div class="cs-carousel{% if variant %} {{ variant }}{% endif %}"{% if slide_width %} style="--cs-slide-w: {{ slide_width }};"{% endif %}>
    <div class="cs-carousel-wrap">
      <div class="cs-track">
        {% for photo in photos %}
          {% set src = url_for('assets.serve', asset_path=asset_prefix ~ '/' ~ photo.filename) %}
          {% set alt = photo.caption if photo.caption else alt_fallback %}
          <figure class="cs-slide" data-src="{{ src }}" data-alt="{{ alt }}">
            <img src="{{ src }}" alt="{{ alt }}" loading="lazy">
            {% if photo.caption %}
              <figcaption>{{ photo.caption }}</figcaption>
            {% endif %}
          </figure>
        {% endfor %}
      </div>
      {% if photos | length > 1 %}
        <button class="cs-arrow cs-arrow--prev" aria-label="Previous">&#8249;</button>
        <button class="cs-arrow cs-arrow--next" aria-label="Next">&#8250;</button>
      {% endif %}
    </div>
  </div>
{% endmacro %}