{% extends 'base.html.twig' %}

{% block title %}Card - Design System - Bubul{% endblock %}

{% block body %}
<div class="min-h-screen bg-gray-50">

    {# ===== HEADER ===== #}
    <header class="bg-white border-b border-gray-200 sticky top-0 z-10">
        <div class="max-w-7xl mx-auto px-6 py-4">
            <div class="flex items-center gap-4">
                <a href="{{ path('admin_design_system') }}" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                </a>
                <div>
                    <div class="flex items-center gap-2">
                        <span class="text-sm text-gray-500">Molécules</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">Card</h1>
                    </div>
                    <p class="text-sm text-gray-500">Conteneur flexible avec header, body et footer</p>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-6 py-8">

        {# ===== COMPOSITION ===== #}
        <section class="mb-12 bg-green-50 rounded-xl p-6 border border-green-200">
            <h2 class="text-lg font-semibold text-green-900 mb-4">Composition</h2>
            <div class="flex flex-wrap items-center gap-3">
                <span class="px-3 py-1.5 bg-blue-100 text-blue-700 rounded border border-blue-200 font-medium text-sm">Icon</span>
                <span class="text-green-400 font-bold">+</span>
                <span class="px-3 py-1.5 bg-purple-100 text-purple-700 rounded border border-purple-200 font-medium text-sm">Typography</span>
                <span class="text-green-400 font-bold">+</span>
                <span class="px-3 py-1.5 bg-orange-100 text-orange-700 rounded border border-orange-200 font-medium text-sm">Button</span>
                <span class="text-green-600 font-bold text-lg">=</span>
                <span class="px-4 py-2 bg-green-500 text-white rounded-lg font-semibold shadow-sm">Card</span>
            </div>
        </section>

        {# ===== CONTENU FLEXIBLE ===== #}
        <section class="mb-12 bg-blue-50 rounded-xl p-6 border border-blue-200">
            <h2 class="text-lg font-semibold text-blue-900 mb-4 flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Que peut-on mettre dans une Card ?
            </h2>
            <p class="text-sm text-blue-800 mb-4">
                La Card utilise <code class="bg-blue-100 px-1 rounded">{% verbatim %}{% embed %}{% endverbatim %}</code> au lieu de <code class="bg-blue-100 px-1 rounded">{% verbatim %}{% include %}{% endverbatim %}</code>,
                ce qui permet d'injecter <strong>n'importe quel contenu HTML</strong> via les blocks Twig.
            </p>
            <div class="grid md:grid-cols-3 gap-4">
                <div class="bg-white rounded-lg p-4 border border-blue-100">
                    <h3 class="font-semibold text-gray-900 mb-2 text-sm">{% verbatim %}{% block body %}{% endverbatim %}</h3>
                    <ul class="text-xs text-gray-600 space-y-1">
                        <li>- Texte, paragraphes</li>
                        <li>- Images, icones</li>
                        <li>- Listes, tableaux</li>
                        <li>- Formulaires</li>
                        <li>- Autres composants</li>
                        <li>- Statistiques, graphiques</li>
                    </ul>
                </div>
                <div class="bg-white rounded-lg p-4 border border-blue-100">
                    <h3 class="font-semibold text-gray-900 mb-2 text-sm">{% verbatim %}{% block footer %}{% endverbatim %}</h3>
                    <ul class="text-xs text-gray-600 space-y-1">
                        <li>- Boutons d'action</li>
                        <li>- Liens</li>
                        <li>- Metadata (date, auteur)</li>
                        <li>- Pagination</li>
                        <li>- Tags, badges</li>
                    </ul>
                </div>
                <div class="bg-white rounded-lg p-4 border border-blue-100">
                    <h3 class="font-semibold text-gray-900 mb-2 text-sm">{% verbatim %}{% block headerAction %}{% endverbatim %}</h3>
                    <ul class="text-xs text-gray-600 space-y-1">
                        <li>- Bouton menu (3 points)</li>
                        <li>- Badge de statut</li>
                        <li>- Toggle, switch</li>
                        <li>- Bouton d'action rapide</li>
                    </ul>
                </div>
            </div>
        </section>

        {# ===== USAGE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Usage</h2>
            </div>
            <div class="p-6">
                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto mb-4">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% embed '_molecules/card/card.html.twig' with {
    title: 'Mon titre',
    subtitle: 'Sous-titre optionnel',
    icon: 'settings'
} %}
    {% block body %}
        <p>Contenu de la card</p>
    {% endblock %}
    {% block footer %}
        <button>Action</button>
    {% endblock %}
{% endembed %}{% endverbatim %}</code></pre>
                </div>
                <p class="text-sm text-gray-500">Fichier : <code class="bg-gray-100 px-1 rounded">templates/_molecules/card/card.html.twig</code></p>
            </div>
        </section>

        {# ===== VARIANTES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Variantes</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">variant</code></p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    {# Default #}
                    <div>
                        <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Default</p>
                        {% embed '_molecules/card/card.html.twig' with { title: 'Card Default', variant: 'default' } %}
                            {% block body %}
                                <p class="text-gray-600">Style par défaut avec ombre légère et bordure subtile.</p>
                            {% endblock %}
                        {% endembed %}
                    </div>

                    {# Elevated #}
                    <div>
                        <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Elevated</p>
                        {% embed '_molecules/card/card.html.twig' with { title: 'Card Elevated', variant: 'elevated' } %}
                            {% block body %}
                                <p class="text-gray-600">Ombre plus prononcée pour mise en avant.</p>
                            {% endblock %}
                        {% endembed %}
                    </div>

                    {# Bordered #}
                    <div>
                        <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Bordered</p>
                        {% embed '_molecules/card/card.html.twig' with { title: 'Card Bordered', variant: 'bordered' } %}
                            {% block body %}
                                <p class="text-gray-600">Bordure plus visible, sans ombre.</p>
                            {% endblock %}
                        {% endembed %}
                    </div>

                    {# Flat #}
                    <div>
                        <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Flat</p>
                        {% embed '_molecules/card/card.html.twig' with { title: 'Card Flat', variant: 'flat' } %}
                            {% block body %}
                                <p class="text-gray-600">Fond gris subtil, style minimaliste.</p>
                            {% endblock %}
                        {% endembed %}
                    </div>

                </div>
            </div>
        </section>

        {# ===== AVEC HEADER COMPLET ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Header avec icône</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètres : <code class="bg-gray-200 px-1 rounded">icon</code>, <code class="bg-gray-200 px-1 rounded">iconColor</code>, <code class="bg-gray-200 px-1 rounded">subtitle</code></p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Statistiques',
                        subtitle: 'Dernières 24 heures',
                        icon: 'chart',
                        iconColor: 'primary'
                    } %}
                        {% block body %}
                            <div class="text-3xl font-bold text-gray-900">1,234</div>
                            <p class="text-sm text-gray-500 mt-1">Visiteurs uniques</p>
                        {% endblock %}
                    {% endembed %}

                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Revenus',
                        subtitle: 'Ce mois',
                        icon: 'wallet',
                        iconColor: 'success'
                    } %}
                        {% block body %}
                            <div class="text-3xl font-bold text-success">+12.5%</div>
                            <p class="text-sm text-gray-500 mt-1">Par rapport au mois dernier</p>
                        {% endblock %}
                    {% endembed %}

                </div>
            </div>
        </section>

        {# ===== AVEC FOOTER ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Avec Footer</h2>
                <p class="text-sm text-gray-500 mt-1">Block : <code class="bg-gray-200 px-1 rounded">{% verbatim %}{% block footer %}{% endverbatim %}</code></p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Utilisateur',
                        icon: 'user',
                        iconColor: 'cohorts'
                    } %}
                        {% block body %}
                            <p class="text-gray-600">Jean Dupont</p>
                            <p class="text-sm text-gray-400">jean.dupont@email.com</p>
                        {% endblock %}
                        {% block footer %}
                            <div class="flex gap-2">
                                {% include '_atoms/button/button.html.twig' with { label: 'Editer', variant: 'outline', size: 'sm' } %}
                                {% include '_atoms/button/button.html.twig' with { label: 'Supprimer', variant: 'ghost', size: 'sm', color: 'error' } %}
                            </div>
                        {% endblock %}
                    {% endembed %}

                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Projet',
                        subtitle: 'En cours',
                        icon: 'folder',
                        iconColor: 'warning'
                    } %}
                        {% block body %}
                            <p class="text-gray-600">Refonte du site web</p>
                            <div class="mt-3">
                                {% include '_atoms/progress/progress.html.twig' with { value: 65, size: 'sm' } %}
                            </div>
                        {% endblock %}
                        {% block footer %}
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">65% complete</span>
                                {% include '_atoms/button/button.html.twig' with { label: 'Voir', variant: 'primary', size: 'sm' } %}
                            </div>
                        {% endblock %}
                    {% endembed %}

                </div>
            </div>
        </section>

        {# ===== CARD CLIQUABLE ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Card cliquable</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètres : <code class="bg-gray-200 px-1 rounded">href</code>, <code class="bg-gray-200 px-1 rounded">hover</code></p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Documentation',
                        icon: 'book',
                        href: '#',
                        iconColor: 'info'
                    } %}
                        {% block body %}
                            <p class="text-gray-600 text-sm">Accédez à la documentation complète du projet.</p>
                        {% endblock %}
                    {% endembed %}

                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Support',
                        icon: 'help',
                        href: '#',
                        iconColor: 'warning'
                    } %}
                        {% block body %}
                            <p class="text-gray-600 text-sm">Besoin d'aide ? Contactez notre équipe support.</p>
                        {% endblock %}
                    {% endembed %}

                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Paramètres',
                        icon: 'settings',
                        href: '#',
                        iconColor: 'muted'
                    } %}
                        {% block body %}
                            <p class="text-gray-600 text-sm">Configurez votre espace de travail.</p>
                        {% endblock %}
                    {% endembed %}

                </div>
            </div>
        </section>

        {# ===== MODE ACTION (QUICK-ACTION STYLE) ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Mode Action</h2>
                <p class="text-sm text-gray-500 mt-1">Activé quand <code class="bg-gray-200 px-1 rounded">status</code> est défini — Style quick-action avec animations hover</p>
            </div>
            <div class="p-6">
                {# Info box #}
                <div class="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
                    <p class="text-sm text-blue-800">
                        <strong>Mode Action</strong> transforme la Card en bouton d'action avec :
                        icône avec background, animations au hover (scale, rotation, translation),
                        flèche qui slide-in, et ombre colorée.
                    </p>
                </div>

                <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto mb-6">
                    <pre class="text-sm text-gray-100"><code>{% verbatim %}{% embed '_molecules/card/card.html.twig' with {
    title: 'Créer un cours',
    description: 'Générez un cours depuis un PDF',
    icon: 'bubul-moodia',
    status: 'available',
    href: '/moodia'
} %}{% endembed %}{% endverbatim %}</code></pre>
                </div>

                <p class="text-xs text-gray-400 uppercase tracking-wider mb-4">Status: available (interactif)</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Créer un cours',
                        description: 'Générez un cours complet depuis un PDF en quelques minutes.',
                        icon: 'bubul-moodia',
                        status: 'available',
                        href: '#'
                    } %}
                        {% block body %}{% endblock %}
                    {% endembed %}

                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Poser une question',
                        description: 'Discutez avec l\'IA et obtenez des réponses instantanées.',
                        icon: 'bubul-serenia',
                        status: 'available',
                        href: '#'
                    } %}
                        {% block body %}{% endblock %}
                    {% endembed %}
                </div>

                <p class="text-xs text-gray-400 uppercase tracking-wider mb-4">Status: locked (non-interactif)</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Créer une présentation',
                        description: 'Générez des slides professionnels automatiquement.',
                        icon: 'bubul-slidia',
                        status: 'locked'
                    } %}
                        {% block body %}{% endblock %}
                    {% endembed %}

                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Analyser un document',
                        description: 'Extraction intelligente de données depuis vos PDF.',
                        icon: 'document',
                        status: 'locked'
                    } %}
                        {% block body %}{% endblock %}
                    {% endembed %}
                </div>

                <p class="text-xs text-gray-400 uppercase tracking-wider mb-4">Status: coming (bientôt disponible)</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Assistant Sam',
                        description: 'Nouvel outil en cours de développement.',
                        icon: 'bubul-sam',
                        status: 'coming'
                    } %}
                        {% block body %}{% endblock %}
                    {% endembed %}

                    {% embed '_molecules/card/card.html.twig' with {
                        title: 'Générateur de quiz',
                        description: 'Créez des questionnaires interactifs.',
                        icon: 'check-circle',
                        status: 'coming',
                        badge: 'Bientôt'
                    } %}
                        {% block body %}{% endblock %}
                    {% endembed %}
                </div>

                <div class="p-4 bg-gray-50 rounded-lg">
                    <p class="text-sm font-medium text-gray-700 mb-3">Valeurs de status :</p>
                    <div class="grid md:grid-cols-3 gap-4 text-sm">
                        <div class="bg-white p-3 rounded border border-gray-200">
                            <code class="text-primary font-semibold">available</code>
                            <ul class="mt-2 text-gray-600 text-xs space-y-1">
                                <li>• Icône scale + rotation au hover</li>
                                <li>• Flèche slide-in depuis la droite</li>
                                <li>• Ombre bleue au hover</li>
                                <li>• Card translate-y au hover</li>
                            </ul>
                        </div>
                        <div class="bg-white p-3 rounded border border-gray-200">
                            <code class="text-gray-500 font-semibold">locked</code>
                            <ul class="mt-2 text-gray-600 text-xs space-y-1">
                                <li>• Icône cadenas</li>
                                <li>• Opacité réduite (75%)</li>
                                <li>• Grayscale sur l'icône</li>
                                <li>• Non cliquable</li>
                            </ul>
                        </div>
                        <div class="bg-white p-3 rounded border border-gray-200">
                            <code class="text-gray-500 font-semibold">coming</code>
                            <ul class="mt-2 text-gray-600 text-xs space-y-1">
                                <li>• Badge "À venir" automatique</li>
                                <li>• Opacité réduite (75%)</li>
                                <li>• Personnalisable avec `badge`</li>
                                <li>• Non cliquable</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== PADDING ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Padding</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">padding</code></p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">

                    {% embed '_molecules/card/card.html.twig' with { title: 'None', padding: 'none' } %}
                        {% block body %}
                            <div class="bg-blue-100 p-4">
                                <p class="text-sm text-blue-700">padding: none</p>
                            </div>
                        {% endblock %}
                    {% endembed %}

                    {% embed '_molecules/card/card.html.twig' with { title: 'Small', padding: 'sm' } %}
                        {% block body %}
                            <p class="text-sm text-gray-600">padding: sm</p>
                        {% endblock %}
                    {% endembed %}

                    {% embed '_molecules/card/card.html.twig' with { title: 'Medium', padding: 'md' } %}
                        {% block body %}
                            <p class="text-sm text-gray-600">padding: md (défaut)</p>
                        {% endblock %}
                    {% endembed %}

                    {% embed '_molecules/card/card.html.twig' with { title: 'Large', padding: 'lg' } %}
                        {% block body %}
                            <p class="text-sm text-gray-600">padding: lg</p>
                        {% endblock %}
                    {% endembed %}

                </div>
            </div>
        </section>

        {# ===== PARAMÈTRES ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Paramètres</h2>
            </div>
            <div class="p-6 overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Paramètre</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Type</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Défaut</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600">
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>title</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Titre du header</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>subtitle</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Sous-titre du header</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>description</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Description (pour mode action)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>icon</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Nom de l'icône</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>iconColor</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">primary</td><td class="py-2 px-3">Couleur de l'icône</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>status</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">available, locked, coming (active le Mode Action)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>badge</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Badge texte (ex: "Nouveau", "Bientôt")</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>variant</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">default</td><td class="py-2 px-3">default, elevated, bordered, flat</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>padding</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">md</td><td class="py-2 px-3">none, sm, md, lg</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>href</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">URL (rend la card cliquable)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>hover</code></td><td class="py-2 px-3">bool</td><td class="py-2 px-3">false</td><td class="py-2 px-3">Effet hover (auto si href)</td></tr>
                        <tr><td class="py-2 px-3"><code>class</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">''</td><td class="py-2 px-3">Classes additionnelles</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

        {# ===== BLOCKS ===== #}
        <section class="mb-12 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-semibold text-gray-900">Blocks Twig</h2>
            </div>
            <div class="p-6 overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200">
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Block</th>
                            <th class="text-left py-2 px-3 font-medium text-gray-700">Description</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600">
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>{% verbatim %}{% block body %}{% endverbatim %}</code></td><td class="py-2 px-3">Contenu principal de la card (requis)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>{% verbatim %}{% block footer %}{% endverbatim %}</code></td><td class="py-2 px-3">Footer optionnel avec fond gris</td></tr>
                        <tr><td class="py-2 px-3"><code>{% verbatim %}{% block headerAction %}{% endverbatim %}</code></td><td class="py-2 px-3">Action dans le header (bouton, badge...)</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

    </div>
</div>
{% endblock %}