{% extends 'base.html.twig' %}
{% block title %}Mes playlists — Serigne Sam Mbaye{% endblock %}
{% block body %}
<section class="mx-auto max-w-4xl px-4 py-12">
    <h1 class="rule-gold font-display text-3xl font-semibold">Mes playlists</h1>
    <p class="mt-3 text-sand">Bonjour {{ app.user.displayName }} — vos sélections personnelles.</p>

    <div class="mt-8 space-y-6">
        {% for playlist in playlists %}
            <div class="card p-6">
                <div class="flex items-center justify-between">
                    <h2 class="font-display text-xl font-semibold text-gold-300">{{ playlist.name }}</h2>
                    <span class="text-xs text-sand-dim">{{ playlist.items|length }} conférence(s)</span>
                </div>
                <ul class="mt-4 divide-y divide-night-700/50">
                    {% for item in playlist.items %}
                        <li class="flex items-center justify-between gap-3 py-3">
                            <a href="{{ path('app_podcast_show', {slug: item.podcast.slug}) }}" class="min-w-0 truncate text-sm hover:text-gold-300">{{ item.podcast.title }}</a>
                            <div class="flex shrink-0 items-center gap-3">
                                <span class="text-xs text-sand-dim">{{ item.podcast.durationLabel }}</span>
                                <button type="button" class="grid h-8 w-8 place-items-center rounded-full bg-gradient-to-br from-gold-600 to-gold-300 text-xs text-night-950"
                                        aria-label="Écouter"
                                        data-play data-id="{{ item.podcast.id }}" data-title="{{ item.podcast.title|e('html_attr') }}"
                                        data-url="/{{ item.podcast.audioPath }}" data-duration="{{ item.podcast.durationSeconds }}"
                                        data-queue="pl-{{ playlist.id }}">▶</button>
                            </div>
                        </li>
                    {% else %}
                        <li class="py-3 text-sm text-sand-dim">Playlist vide — ajoutez des conférences avec le bouton « ＋ Playlist ».</li>
                    {% endfor %}
                </ul>
            </div>
        {% else %}
            <div class="card p-8 text-center text-sand">
                Vous n'avez pas encore de playlist.<br>
                <a href="{{ path('app_podcasts') }}" class="btn-gold mt-4">Parcourir les conférences</a>
            </div>
        {% endfor %}
    </div>
</section>
{% endblock %}