{% extends 'admin/_layout.html.twig' %}
{% block admin %}
    <h1 class="rule-gold font-display text-2xl font-semibold">Thèmes</h1>

    <form action="{{ path('admin_theme_create') }}" method="post" class="card mt-6 p-6">
        <input type="hidden" name="_token" value="{{ csrf_token('theme_create') }}">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-end">
            <div class="flex-1">
                <label class="label" for="t-name">Nouveau thème</label>
                <input class="field" id="t-name" name="name" placeholder="Foi, Histoire, Éducation…" required maxlength="100">
            </div>
            <button class="btn-gold shrink-0" type="submit">Créer</button>
        </div>

        <div class="mt-5">
            <p class="label">Couleur</p>
            <div class="mt-2 flex flex-wrap gap-3">
                {% for key, c in palette %}
                    <label class="group relative cursor-pointer" title="{{ c.label }}">
                        <input type="radio" name="color" value="{{ key }}" class="peer sr-only" {{ loop.first ? 'checked' }}>
                        <span class="block h-9 w-9 rounded-full ring-2 ring-transparent ring-offset-2 ring-offset-night-900 transition-all duration-150 peer-checked:ring-gold-300 peer-checked:scale-110 group-hover:scale-105"
                              style="background-color: {{ c.hex }};"></span>
                    </label>
                {% endfor %}
            </div>
        </div>
    </form>

    <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {% for t in themes %}
            {% set c = palette[t.color] ?? {'label': t.color, 'hex': '#8a8a8a'} %}
            <div class="card group relative overflow-hidden p-5 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/20">
                <div class="absolute inset-x-0 top-0 h-1" style="background-color: {{ c.hex }};"></div>
                <div class="flex items-start justify-between gap-3">
                    <div class="flex items-center gap-3">
                        <span class="h-8 w-8 shrink-0 rounded-full ring-1 ring-white/10" style="background-color: {{ c.hex }};"></span>
                        <div>
                            <p class="font-display text-base font-semibold">{{ t.name }}</p>
                            <p class="text-xs text-sand-dim">/theme/{{ t.slug }} · {{ c.label }}</p>
                        </div>
                    </div>
                    <form action="{{ path('admin_theme_delete', {id: t.id}) }}" method="post"
                          class="opacity-0 transition-opacity duration-150 group-hover:opacity-100"
                          onsubmit="return confirm('Supprimer le thème « {{ t.name|e('js') }} » ? Les conférences ne seront pas supprimées.')">
                        <input type="hidden" name="_token" value="{{ csrf_token('theme_del_' ~ t.id) }}">
                        <button class="text-xs text-red-400 hover:underline" type="submit">Supprimer</button>
                    </form>
                </div>
                <div class="mt-4 flex items-center gap-1.5 text-xs text-sand-dim">
                <span class="inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[11px] font-semibold"
                      style="background-color: {{ c.hex }}26; color: {{ c.hex }};">{{ t.podcasts|length }}</span>
                    <span>conférence{{ t.podcasts|length > 1 ? 's' : '' }}</span>
                </div>
            </div>
        {% else %}
            <p class="col-span-full py-8 text-center text-sm text-sand-dim">Aucun thème pour l'instant — créez-en un ci-dessus.</p>
        {% endfor %}
    </div>
    <div class="flex items-center justify-between">
        <h1 class="rule-gold font-display text-2xl font-semibold">Thèmes</h1>
        <a href="{{ path('admin_theme_assign') }}" class="btn-gold">Associer des conférences</a>
    </div>
{% endblock %}