{# ───────────────────────────────────────────────────────────────────────────
   Sommaire d'une conférence.

   Variables : podcast

   Chaque ligne est un bouton relié au lecteur global : au clic, la lecture se
   positionne à `startSeconds` sans recharger la page. Le lecteur met à jour
   la classe `is-current-chapter` au fil de l'écoute, sans que ce gabarit ait
   à connaître quoi que ce soit de son fonctionnement interne.
   ─────────────────────────────────────────────────────────────────────────── #}
{% set chapters = podcast.chapters %}
{% if chapters|length %}
    {% set audio_url = podcast.audioPath starts with '/' ? podcast.audioPath : '/' ~ podcast.audioPath %}

    <section class="mt-10" aria-labelledby="chapitres-titre">
        <h2 id="chapitres-titre" class="rule-gold font-display text-lg font-semibold">Chapitres</h2>

        <ol class="panel mt-4 divide-y divide-night-700/40 !p-0">
            {% for chapter in chapters %}
                <li>
                    <button type="button"
                            class="chapter-row flex w-full items-start gap-3 px-4 py-3 text-left transition-colors sm:px-5"
                            data-chapter-start="{{ chapter.startSeconds }}"
                            {% if chapter.endSeconds %}data-chapter-end="{{ chapter.endSeconds }}"{% endif %}
                            data-chapter-podcast="{{ podcast.id }}">
                        <span class="tabular mt-0.5 shrink-0 text-xs font-semibold text-gold-300">{{ chapter.timecode }}</span>
                        <span class="min-w-0 flex-1">
                            <span class="block text-sm font-medium leading-snug">{{ chapter.title }}</span>
                            {% if chapter.summary %}
                                <span class="mt-0.5 block text-xs text-sand-dim">{{ chapter.summary }}</span>
                            {% endif %}
                        </span>
                    </button>
                </li>
            {% endfor %}
        </ol>

        {# Bouton caché : donne au lecteur les données de la conférence lorsque
           la page ne comporte aucun bouton de lecture visible pour elle. #}
        <button type="button" class="sr-only" tabindex="-1" aria-hidden="true"
                data-play data-queue-skip
                data-id="{{ podcast.id }}"
                data-title="{{ podcast.title|e('html_attr') }}"
                data-slug="{{ podcast.slug }}"
                data-url="{{ audio_url }}"
                data-theme="{{ podcast.theme ? podcast.theme.name|e('html_attr') }}"
                data-duration="{{ podcast.durationSeconds }}">Lire</button>
    </section>
{% endif %}