{% extends 'base.html.twig' %}
{% block title %}Thèmes des conférences — Serigne Sam Mbaye{% endblock %}
{% block meta_description %}Parcourez les conférences de Serigne Sam Mbaye classées par thème : soufisme, mouridisme, tawhid, jurisprudence islamique, prophètes, société et bien plus.{% endblock %}
{% block body %}
    <section class="mx-auto max-w-6xl px-4 py-12">
        <p class="text-xs font-semibold uppercase tracking-[0.3em] text-gold-400">Explorer</p>
        <h1 class="rule-gold mt-2 font-display text-3xl font-semibold">Thèmes</h1>
        <p class="mt-3 max-w-2xl leading-relaxed text-sand">
            Les conférences de Serigne Sam Mbaye couvrent un large éventail de sujets — du soufisme au tawhid, de la vie des prophètes à la jurisprudence islamique, en passant par les questions de société. Choisissez un thème pour découvrir les causeries qui s'y rapportent.
        </p>

        {% if themes|length > 0 %}
            <div class="mt-8">
                <label for="theme-filter" class="sr-only">Rechercher un thème</label>
                <input
                    type="search"
                    id="theme-filter"
                    class="field w-full max-w-sm"
                    placeholder="Rechercher un thème…"
                    onkeyup="(function(v){
                    v = v.toLowerCase();
                    document.querySelectorAll('[data-theme-card]').forEach(function(card){
                        var name = card.getAttribute('data-theme-name');
                        card.classList.toggle('hidden', name.indexOf(v) === -1);
                    });
                })(this.value)"
                >
            </div>
        {% endif %}

        <div class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {% for theme in themes %}
                <a
                    href="{{ path('app_theme_show', {slug: theme.slug}) }}"
                    class="card group p-6 transition hover:border-gold-400/40 hover:-translate-y-0.5"
                    data-theme-card
                    data-theme-name="{{ theme.name|lower }}"
                >
                    <div class="flex items-start justify-between gap-3">
                        <h2 class="font-display text-xl font-semibold text-gold-300 group-hover:text-gold-200">{{ theme.name }}</h2>
                        <span class="mt-1 shrink-0 text-gold-400/60 transition group-hover:translate-x-1 group-hover:text-gold-300">→</span>
                    </div>

                    {% if theme.description %}
                        <p class="mt-2 text-sm text-sand">{{ theme.description|slice(0, 140) }}{% if theme.description|length > 140 %}…{% endif %}</p>
                    {% endif %}

                    <p class="mt-4 inline-flex items-center gap-1.5 text-xs text-sand-dim">
                        <span aria-hidden="true">▶</span>
                        {% if theme.podcasts|length == 0 %}
                            Aucune conférence pour l'instant
                        {% elseif theme.podcasts|length == 1 %}
                            1 conférence
                        {% else %}
                            {{ theme.podcasts|length }} conférences
                        {% endif %}
                    </p>
                </a>
            {% else %}
                <div class="col-span-full card p-10 text-center text-sand-dim">
                    <p>Aucun thème n'a encore été créé.</p>
                    <p class="mt-1 text-sm">Ajoutez-en depuis l'espace d'administration.</p>
                </div>
            {% endfor %}
        </div>

        <div id="theme-empty-state" class="hidden mt-6 text-center text-sand-dim">
            Aucun thème ne correspond à votre recherche.
        </div>
    </section>

    <script>
        // Affiche un message si le filtre ne renvoie aucun résultat.
        document.getElementById('theme-filter')?.addEventListener('keyup', function () {
            var cards = document.querySelectorAll('[data-theme-card]');
            var visible = Array.from(cards).some(function (c) { return !c.classList.contains('hidden'); });
            document.getElementById('theme-empty-state').classList.toggle('hidden', visible || cards.length === 0);
        });
    </script>
{% endblock %}