{% extends "base.html" %}
{% block title %}{{ section.config.title }} -- {{ site.brand }}{% endblock %}
{% block content %}
<section class="section-page-heading">
  <div class="carousel-heading-line">
    <h1>{{ section.config.title }}</h1>
  </div>
  {% if section.config.blurb %}
  <p>{{ section.config.blurb }}</p>
  {% endif %}
</section>

<ol class="section-deck-grid" role="list">
  {% 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>
    <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">
            <h2>{{ deck.title }}</h2>
            {% 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>
{% endblock %}