{# ───────────────────────────────────────────────────────────────────────────
   Ligne de conférence dans une liste.

   Variables :
     podcast  — l'entité Podcast
     queue    — nom de la file de lecture (les lignes partageant ce nom
                forment la file « suivant/précédent » du lecteur)

   Contrat avec public/js/podcast-player.js :
     data-row-id    → identifie la ligne à mettre en évidence pendant la lecture
     data-row-body  → conteneur où sont injectés le badge d'état et la barre
                      de progression
     .track-title / .track-meta → éléments recolorés quand la ligne est active
   ─────────────────────────────────────────────────────────────────────────── #}
{% set audio_url = podcast.audioPath starts with '/' ? podcast.audioPath : '/' ~ podcast.audioPath %}
{% set theme_name = podcast.theme ? podcast.theme.name : '' %}

<div class="track-row flex items-center gap-3 px-4 py-3.5 sm:px-5"
     data-row-id="{{ podcast.id }}"
     data-row-title="{{ podcast.title|e('html_attr') }}"
     data-row-theme="{{ theme_name|e('html_attr') }}">

    <button type="button"
            class="grid h-9 w-9 shrink-0 place-items-center rounded-full border border-gold-500/40 text-gold-300 transition hover:bg-gold-500/10"
            aria-label="Écouter {{ podcast.title }}"
            data-play
            data-id="{{ podcast.id }}"
            data-title="{{ podcast.title|e('html_attr') }}"
            data-slug="{{ podcast.slug }}"
            data-url="{{ audio_url }}"
            data-theme="{{ theme_name|e('html_attr') }}"
            data-duration="{{ podcast.durationSeconds }}"
            {% if queue is defined and queue %}data-queue="{{ queue }}"{% endif %}>▶</button>

    <div class="min-w-0 flex-1" data-row-body>
        <p class="truncate font-display text-[15px] font-semibold leading-snug">
            <a href="{{ path('app_podcast_show', {slug: podcast.slug}) }}"
               class="track-title transition-colors hover:text-gold-300">{{ podcast.title }}</a>
        </p>
        <p class="track-meta mt-0.5 flex flex-wrap items-center gap-x-1.5 text-xs text-sand-dim">
            <span>{{ podcast.durationLabel }}</span>
            {% if podcast.recordedYear %}<span>· {{ podcast.recordedYear }}</span>{% endif %}
            {% if theme_name %}<span class="hidden sm:inline">· {{ theme_name }}</span>{% endif %}
            <span class="hidden sm:inline" data-play-count="{{ podcast.id }}">🎧 {{ podcast.playCount }}</span>
        </p>
    </div>

    <div class="flex shrink-0 items-center gap-0.5">
        <button type="button"
                class="pp-btn h-8 w-8"
                title="Lire ensuite"
                aria-label="Lire {{ podcast.title }} ensuite"
                data-queue-add="next"
                data-id="{{ podcast.id }}"
                data-title="{{ podcast.title|e('html_attr') }}"
                data-slug="{{ podcast.slug }}"
                data-url="{{ audio_url }}"
                data-theme="{{ theme_name|e('html_attr') }}"
                data-duration="{{ podcast.durationSeconds }}">⏭</button>

        <button type="button"
                class="pp-btn h-8 w-8"
                title="Ajouter à une playlist"
                aria-label="Ajouter {{ podcast.title }} à une playlist"
                data-playlist-add="{{ podcast.id }}">＋</button>

        <button type="button"
                class="pp-btn h-8 w-8"
                aria-label="Ajouter {{ podcast.title }} aux favoris"
                data-favorite="{{ podcast.id }}">♡</button>
    </div>
</div>