{# Carousel for one section. Receives `section`, `site`, `thumbs`,
   `preview_gifs`, `deck_dates`, and optional `carousel_variant`. #}
<section
  id="{{ section.config.slug }}"
  class="carousel-section{% if carousel_variant == 'latest' %} carousel-section-latest{% endif %}"
  data-section="{{ section.config.slug }}"
  aria-labelledby="hdr-{{ section.config.slug }}"
>
  <header class="carousel-heading">
    <div>
      <div class="carousel-heading-line">
        <h2 id="hdr-{{ section.config.slug }}">{{ section.config.title }}</h2>
      </div>
      {% if section.config.blurb %}
      <p>{{ section.config.blurb }}</p>
      {% endif %}
    </div>
    {% if carousel_variant != "latest" %}
    <a
      href="{{ site.url('sections/' + section.config.slug + '/') }}"
      class="carousel-section-link"
    >
      <span>View all</span>
      <i data-lucide="arrow-up-right" aria-hidden="true"></i>
    </a>
    {% endif %}
  </header>

  <div class="carousel-shell">
    <button
      class="carousel-arrow carousel-arrow-prev"
      data-dir="prev"
      aria-label="Scroll {{ section.config.title }} left"
      title="Previous"
      type="button"
    >
      <i data-lucide="chevron-left" aria-hidden="true"></i>
    </button>

    <ol
      class="carousel-track"
      role="list"
      tabindex="0"
      aria-label="{% if carousel_variant == 'latest' %}Latest decks{% else %}{{ section.config.title }} decks{% endif %}"
    >
      {% for deck in section.decks %}
      {% set thumb = thumbs.get(deck.slug) %}
      {% set gif = preview_gifs.get(deck.slug) %}
      {% set created = deck_dates.get(deck.slug) %}
      <li class="carousel-card-wrap">
        <a
          href="{{ site.url('decks/' + deck.slug + '/') }}"
          class="carousel-card"
          aria-label="Open {{ deck.title }}"
        >
          <div class="carousel-thumb">
            {% if thumb %}
            <img
              src="{{ site.url('decks/' + deck.slug + '/' + thumb) }}"
              {% if gif %}data-preview-gif="{{ site.url('decks/' + deck.slug + '/' + gif) }}"{% endif %}
              alt=""
              loading="lazy"
              decoding="async"
              width="480"
              height="270"
            />
            {% else %}
            <div class="carousel-thumb-empty" aria-hidden="true">
              <span>{{ deck.title[:1] }}</span>
            </div>
            {% endif %}
            <div class="carousel-scrim" aria-hidden="true"></div>
            <div class="carousel-card-content">
              <div class="carousel-card-top">
                {% if deck.category %}
                <span class="carousel-badge">{{ deck.category }}</span>
                {% endif %}
                {% if created %}
                <span class="carousel-created">
                  <i data-lucide="calendar" aria-hidden="true"></i>
                  {{ created }}
                </span>
                {% endif %}
              </div>
              <div class="carousel-card-bottom">
                <h3>{{ deck.title }}</h3>
                {% if deck.summary %}
                <p>{{ deck.summary }}</p>
                {% endif %}
                <div class="carousel-card-actions">
                  <span class="carousel-play">
                    <i data-lucide="play" aria-hidden="true"></i>
                    Play now
                  </span>
                  {% if deck.duration_minutes %}
                  <span class="carousel-duration">{{ deck.duration_minutes }} min</span>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </a>
      </li>
      {% endfor %}
    </ol>

    <button
      class="carousel-arrow carousel-arrow-next"
      data-dir="next"
      aria-label="Scroll {{ section.config.title }} right"
      title="Next"
      type="button"
    >
      <i data-lucide="chevron-right" aria-hidden="true"></i>
    </button>
  </div>
</section>