{# ───────────────────────────────────────────────────────────────────────────
   Carte conférence (grilles « Les plus écoutées », résultats de recherche…).

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

   Comme les lignes de liste, la carte porte data-row-id : elle est donc
   elle aussi mise en évidence quand sa conférence est en cours de lecture.
   ─────────────────────────────────────────────────────────────────────────── #}
{% set audio_url = podcast.audioPath starts with '/' ? podcast.audioPath : '/' ~ podcast.audioPath %}
{% set theme_name = podcast.theme ? podcast.theme.name : '' %}

<article class="card group flex flex-col overflow-hidden p-5"
         data-row-id="{{ podcast.id }}"
         data-row-title="{{ podcast.title|e('html_attr') }}"
         data-row-theme="{{ theme_name|e('html_attr') }}">

    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0" data-row-body>
            {% if theme_name %}<span class="chip mb-2">{{ theme_name }}</span>{% endif %}
            <h3 class="font-display text-[17px] 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>
            </h3>
            <p class="track-meta mt-1 text-xs text-sand-dim">
                {{ podcast.durationLabel }}{{ podcast.recordedYear ? ' · ' ~ podcast.recordedYear }}
            </p>
        </div>

        <button type="button"
                class="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-gradient-to-br from-gold-600 to-gold-300 text-white opacity-90 transition group-hover:scale-105 group-hover:opacity-100"
                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>

    {% if podcast.description %}<p class="mt-2 line-clamp-2 text-sm text-sand">{{ podcast.description }}</p>{% endif %}

    <div class="mt-auto flex items-center justify-between gap-2 pt-4 text-xs text-sand-dim">
        <span title="Écoutes" data-play-count="{{ podcast.id }}">🎧 {{ podcast.playCount }}</span>
        <span class="flex 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>
        </span>
    </div>
</article>