{# ───────────────────────────────────────────────────────────────────────────
   Section « Écouter maintenant » : grand lecteur à gauche, liste des
   conférences à droite. La liste est rendue en Twig (donc crawlable et
   utile au SEO) ; public/js/podcast-player.js s'y greffe pour mettre en
   évidence la conférence en cours.

   Variables :
     podcasts   — collection de Podcast
     queue      — nom de la file de lecture (ex. 'home', 'theme-foi')
     list_title — titre affiché en tête de la liste (défaut : « Playlist »)
   ─────────────────────────────────────────────────────────────────────────── #}
<div class="mt-6 grid gap-4 sm:mt-8 lg:grid-cols-[1fr_1.15fr] lg:items-stretch lg:gap-6">

    {# Gauche : grand panneau lecteur, injecté par podcast-player.js #}
    <div id="home-player-panel" class="h-[430px] sm:h-[470px] lg:h-[600px]"></div>

    {# Droite : liste complète #}
    <div id="home-playlist" class="card flex h-[460px] flex-col overflow-hidden !p-0 sm:h-[520px] lg:h-[600px]">
        <div class="flex shrink-0 items-center justify-between gap-3 border-b border-night-700/40 px-5 py-4">
            <div class="flex min-w-0 items-center gap-3">
                <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-gradient-to-br from-gold-600 to-gold-300 text-night-950">♪</span>
                <p class="truncate font-display text-lg font-semibold">{{ list_title|default('Playlist') }}</p>
            </div>
            <span class="chip shrink-0">{{ podcasts|length }}</span>
        </div>

        <div class="shrink-0 border-b border-night-700/40 px-5 py-3">
            <input type="search" class="field !py-2.5 text-sm" placeholder="Rechercher une conférence…"
                   aria-label="Rechercher dans la liste"
                   data-playlist-search="home-playlist">
        </div>

        <div class="min-h-0 flex-1 divide-y divide-night-700/40 overflow-y-auto">
            {% for podcast in podcasts %}
                {% include 'partials/track_row.html.twig' with {podcast: podcast, queue: queue} only %}
            {% else %}
                <p class="px-5 py-4 text-sand-dim">Aucune conférence pour l'instant.</p>
            {% endfor %}
            <p class="hidden px-5 py-6 text-center text-sm text-sand-dim" data-search-empty>
                Aucune conférence ne correspond à votre recherche.
            </p>
        </div>

        <p class="shrink-0 border-t border-night-700/40 px-5 py-2.5 text-[11px] text-sand-dim">
            Astuce : espace pour lecture/pause, ← → pour reculer/avancer.
        </p>
    </div>
</div>