{% 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 flex-wrap items-center justify-between gap-3">
                    <h2 class="font-display text-xl font-semibold text-gold-300">{{ playlist.name }}</h2>
                    <div class="flex items-center gap-3">
                        <span class="text-xs text-sand-dim">{{ playlist.items|length }} conférence(s)</span>
                        {% if playlist.items|length %}
                            {% set first = playlist.items|first.podcast %}
                            <button type="button" class="btn-gold px-4 py-2 text-sm"
                                    data-play
                                    data-id="{{ first.id }}" data-title="{{ first.title|e('html_attr') }}"
                                    data-slug="{{ first.slug }}"
                                    data-url="{{ first.audioPath starts with '/' ? first.audioPath : '/' ~ first.audioPath }}"
                                    data-theme="{{ first.theme ? first.theme.name|e('html_attr') }}"
                                    data-duration="{{ first.durationSeconds }}"
                                    data-queue="pl-{{ playlist.id }}" data-queue-skip>▶ Tout lire</button>
                        {% endif %}
                    </div>
                </div>

                <div class="mt-4 divide-y divide-night-700/50">
                    {% for item in playlist.items %}
                        {% include 'partials/track_row.html.twig' with {
                            podcast: item.podcast,
                            queue: 'pl-' ~ playlist.id
                        } only %}
                    {% else %}
                        <p class="py-3 text-sm text-sand-dim">Playlist vide — ajoutez des conférences avec le bouton « ＋ Playlist ».</p>
                    {% endfor %}
                </div>
            </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 %}