{# Composable click-through carousel.

   One widget, used everywhere. A carousel is just an ordered list of frames;
   every surface (app product pages, landing) calls this same macro with a
   different frame list. Do not fork it for bespoke layouts -- if a surface
   needs more, extend the macro.

   Click-through, not animated: the viewer advances frames with the prev/next
   controls, the dots, or the arrow keys. No autoplay, no auto-advance, no
   slide animation -- frames swap instantly.

   Each frame is a `CarouselFrame { image, alt, caption: Option<_> }`
   (see `src/templates/mod.rs`). Usage:

       {%- import "partials/carousel.html" as carousel -%}
       {% call carousel::carousel("af-shots", frames) %}

   Progressive enhancement: with JS off, the first frame shows and the
   controls are inert -- you still see a screenshot, nothing breaks.
#}

{% macro carousel(id, frames) -%}
<div class="carousel" id="{{ id }}" role="group" aria-roledescription="carousel" aria-label="Screenshots" tabindex="0">
    <div class="carousel-viewport">
        {% for f in frames %}
        <figure class="carousel-frame{% if loop.first %} is-active{% endif %}" data-index="{{ loop.index0 }}" role="group" aria-roledescription="slide" aria-label="{{ loop.index }} of {{ frames.len() }}"{% if !loop.first %} aria-hidden="true"{% endif %}>
            <img class="carousel-img" src="{{ f.image }}" alt="{{ f.alt }}" loading="lazy">
            {% if let Some(cap) = f.caption %}<figcaption class="carousel-caption">{{ cap }}</figcaption>{% endif %}
        </figure>
        {% endfor %}
    </div>
    {% if frames.len() > 1 %}
    <button type="button" class="carousel-nav carousel-prev" data-carousel-prev aria-label="Previous screenshot">&#8249;</button>
    <button type="button" class="carousel-nav carousel-next" data-carousel-next aria-label="Next screenshot">&#8250;</button>
    <div class="carousel-dots" role="tablist" aria-label="Choose screenshot">
        {% for f in frames %}
        <button type="button" class="carousel-dot{% if loop.first %} is-active{% endif %}" data-carousel-dot="{{ loop.index0 }}" role="tab" aria-label="Screenshot {{ loop.index }}" aria-selected="{% if loop.first %}true{% else %}false{% endif %}"></button>
        {% endfor %}
    </div>
    {% endif %}
</div>
{%- endmacro %}