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

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

{% block body %}
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <a href="{{ path('admin_design_system') }}" class="text-sm text-gray-500 hover:text-gray-700">← Design System</a>

    <h1 class="text-3xl font-bold text-gray-900 font-secondary mt-4 mb-2">Entity Card</h1>
    <p class="text-gray-500 mb-8">Coque de carte des bibliothèques d'outils : liseré d'accent au survol, corps, pied daté, emplacement du menu contextuel. Le markup était dupliqué à l'identique entre la carte Moodia et la carte Scormia ; ce composant en est l'extraction. Chaque outil ne fournit plus que son contenu, via les cinq blocs (<code class="bg-gray-100 px-1 rounded">badge</code>, <code class="bg-gray-100 px-1 rounded">body</code>, <code class="bg-gray-100 px-1 rounded">footerLeft</code>, <code class="bg-gray-100 px-1 rounded">footerRight</code>, <code class="bg-gray-100 px-1 rounded">menu</code>).</p>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Trois cartes avec accent, cinq blocs renseignés</h2>
    <p class="text-sm text-gray-500 mb-4">Chaque carte utilise un <code class="bg-gray-100 px-1 rounded">accent</code> différent (<code class="bg-gray-100 px-1 rounded">#0C81E4</code>, <code class="bg-gray-100 px-1 rounded">#1E40AF</code>, <code class="bg-gray-100 px-1 rounded">#F59E0B</code>) : survolez une carte pour voir le liseré du haut et le titre reprendre cette couleur. Le bloc <code class="bg-gray-100 px-1 rounded">menu</code> (bouton ⋯) est positionné hors du lien, en haut à droite, pour ne pas déclencher de navigation au clic.</p>
    <div class="bg-gray-50 rounded-2xl border border-gray-100 p-8 mb-8">
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">

            {% embed '_organisms/entity-card/entity-card.html.twig' with {
                href: '#',
                accent: '#0C81E4',
                attr: { 'data-demo-entity-id': 'exemple-1' }
            } only %}
                {% block badge %}
                    <div class="flex items-center justify-between mb-5">
                        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-[11px] font-semibold uppercase tracking-wide"
                              style="background: color-mix(in srgb, var(--acc) 10%, white); color: var(--acc);">
                            Présentation
                        </span>
                    </div>
                {% endblock %}
                {% block body %}
                    <h3 class="text-xl font-semibold text-gray-900 leading-snug mb-4 line-clamp-2 h-14 transition-colors group-hover:text-[var(--acc)]">
                        Lancement produit T3
                    </h3>
                    <p class="text-sm text-gray-500 mb-6">12 diapositives · thème « Aurora »</p>
                {% endblock %}
                {% block footerLeft %}31 juillet 2026{% endblock %}
                {% block footerRight %}
                    <span class="flex items-center gap-1.5 text-xs font-medium" style="color: #0C81E4;">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'xs', color: 'current' } only %}
                        1 200 tokens
                    </span>
                    <span class="flex items-center gap-1.5 text-xs font-medium text-amber-500">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'bolt', size: 'xs', color: 'warning' } only %}
                        0,4 Wh
                    </span>
                {% endblock %}
                {% block menu %}
                    <div class="absolute top-3 right-3 z-10">
                        {% include '_molecules/action-menu/action-menu.html.twig' with {
                            withTrigger: true,
                            position: 'right-0 top-full mt-1',
                            items: [
                                {label: 'Renommer', icon: 'edit', href: '#'},
                                {label: 'Dupliquer', icon: 'copy', href: '#'}
                            ],
                            dangerItems: [
                                {label: 'Supprimer', icon: 'trash', href: '#'}
                            ],
                            accentHex: '#0C81E4'
                        } only %}
                    </div>
                {% endblock %}
            {% endembed %}

            {% embed '_organisms/entity-card/entity-card.html.twig' with {
                href: '#',
                accent: '#1E40AF',
                attr: { 'data-demo-entity-id': 'exemple-2' }
            } only %}
                {% block badge %}
                    <div class="flex items-center justify-between mb-5">
                        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-[11px] font-semibold uppercase tracking-wide"
                              style="background: color-mix(in srgb, var(--acc) 10%, white); color: var(--acc);">
                            Module + Quiz
                        </span>
                    </div>
                {% endblock %}
                {% block body %}
                    <h3 class="text-xl font-semibold text-gray-900 leading-snug mb-4 line-clamp-2 h-14 transition-colors group-hover:text-[var(--acc)]">
                        Onboarding sécurité
                    </h3>
                    <p class="text-sm text-gray-500 mb-6">3 parties · 9 écrans</p>
                {% endblock %}
                {% block footerLeft %}28 juillet 2026{% endblock %}
                {% block footerRight %}
                    <span class="flex items-center gap-1.5 text-xs font-medium" style="color: #1E40AF;">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'xs', color: 'current' } only %}
                        850 tokens
                    </span>
                {% endblock %}
                {% block menu %}
                    <div class="absolute top-3 right-3 z-10">
                        {% include '_molecules/action-menu/action-menu.html.twig' with {
                            withTrigger: true,
                            position: 'right-0 top-full mt-1',
                            items: [
                                {label: 'Exporter (ZIP)', icon: 'download', href: '#'},
                                {label: 'Renommer', icon: 'edit', href: '#'}
                            ],
                            dangerItems: [
                                {label: 'Supprimer', icon: 'trash', href: '#'}
                            ],
                            accentHex: '#1E40AF'
                        } only %}
                    </div>
                {% endblock %}
            {% endembed %}

            {% embed '_organisms/entity-card/entity-card.html.twig' with {
                href: '#',
                accent: '#F59E0B',
                attr: { 'data-demo-entity-id': 'exemple-3' }
            } only %}
                {% block badge %}
                    <div class="flex items-center justify-between mb-5">
                        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-[11px] font-semibold uppercase tracking-wide"
                              style="background: color-mix(in srgb, var(--acc) 10%, white); color: var(--acc);">
                            Podcast
                        </span>
                    </div>
                {% endblock %}
                {% block body %}
                    <h3 class="text-xl font-semibold text-gray-900 leading-snug mb-4 line-clamp-2 h-14 transition-colors group-hover:text-[var(--acc)]">
                        Résumé hebdomadaire
                    </h3>
                    <p class="text-sm text-gray-500 mb-6">4 min 30 · voix « Claire »</p>
                {% endblock %}
                {% block footerLeft %}25 juillet 2026{% endblock %}
                {% block footerRight %}
                    <span class="flex items-center gap-1.5 text-xs font-medium text-amber-500">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'bolt', size: 'xs', color: 'warning' } only %}
                        0,9 Wh
                    </span>
                {% endblock %}
                {% block menu %}
                    <div class="absolute top-3 right-3 z-10">
                        {% include '_molecules/action-menu/action-menu.html.twig' with {
                            withTrigger: true,
                            position: 'right-0 top-full mt-1',
                            items: [
                                {label: 'Renommer', icon: 'edit', href: '#'}
                            ],
                            dangerItems: [
                                {label: 'Supprimer', icon: 'trash', href: '#'}
                            ],
                            accentHex: '#F59E0B'
                        } only %}
                    </div>
                {% endblock %}
            {% endembed %}

        </div>
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Sans <code class="bg-gray-100 px-1 rounded">accent</code> : repli sur la couleur primaire</h2>
    <p class="text-sm text-gray-500 mb-4"><code class="bg-gray-100 px-1 rounded">accent</code> omis : aucune variable <code class="bg-gray-100 px-1 rounded">--acc</code> n'est posée sur le conteneur, le liseré au survol retombe sur <code class="bg-gray-100 px-1 rounded">var(--color-primary)</code>.</p>
    <div class="bg-gray-50 rounded-2xl border border-gray-100 p-8 mb-8">
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
            {% embed '_organisms/entity-card/entity-card.html.twig' with {
                href: '#'
            } only %}
                {% block badge %}
                    <div class="flex items-center justify-between mb-5">
                        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-[11px] font-semibold uppercase tracking-wide bg-primary/10 text-primary">
                            Sans accent
                        </span>
                    </div>
                {% endblock %}
                {% block body %}
                    <h3 class="text-xl font-semibold text-gray-900 leading-snug mb-4 line-clamp-2 h-14 transition-colors group-hover:text-primary">
                        Carte de repli
                    </h3>
                    <p class="text-sm text-gray-500 mb-6">Aucun <code class="bg-gray-200 px-1 rounded">accent</code> fourni</p>
                {% endblock %}
                {% block footerLeft %}20 juillet 2026{% endblock %}
            {% endembed %}
        </div>
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Paramètres</h2>
    <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden mb-8">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-left text-gray-500">
                <tr><th class="px-6 py-3">Paramètre</th><th class="px-6 py-3">Type</th><th class="px-6 py-3">Défaut</th><th class="px-6 py-3">Description</th></tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <tr><td class="px-6 py-3 font-mono">href</td><td class="px-6 py-3">string</td><td class="px-6 py-3">(requis)</td><td class="px-6 py-3">Cible de la carte</td></tr>
                <tr><td class="px-6 py-3 font-mono">accent</td><td class="px-6 py-3">string</td><td class="px-6 py-3">null</td><td class="px-6 py-3">Couleur hex du liseré et du titre au survol</td></tr>
                <tr><td class="px-6 py-3 font-mono">attr</td><td class="px-6 py-3">object</td><td class="px-6 py-3">{}</td><td class="px-6 py-3">Attributs data du conteneur</td></tr>
                <tr><td class="px-6 py-3 font-mono">class</td><td class="px-6 py-3">string</td><td class="px-6 py-3">''</td><td class="px-6 py-3">Classes additionnelles du conteneur</td></tr>
            </tbody>
        </table>
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Blocs</h2>
    <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden mb-8">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-left text-gray-500">
                <tr><th class="px-6 py-3">Bloc</th><th class="px-6 py-3">Description</th></tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <tr><td class="px-6 py-3 font-mono">badge</td><td class="px-6 py-3">Pastille de type, en haut du corps</td></tr>
                <tr><td class="px-6 py-3 font-mono">body</td><td class="px-6 py-3">Titre et métadonnées</td></tr>
                <tr><td class="px-6 py-3 font-mono">footerLeft</td><td class="px-6 py-3">Pied, à gauche (date en général)</td></tr>
                <tr><td class="px-6 py-3 font-mono">footerRight</td><td class="px-6 py-3">Pied, à droite (tokens, énergie)</td></tr>
                <tr><td class="px-6 py-3 font-mono">menu</td><td class="px-6 py-3">Menu contextuel, positionné en absolu</td></tr>
            </tbody>
        </table>
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Code</h2>
    <div class="bg-gray-900 rounded-2xl p-6 overflow-x-auto">
        <pre class="text-sm text-gray-100"><code>{% verbatim %}{% embed '_organisms/entity-card/entity-card.html.twig' with {
    href: path('app_slidia_editor', {uuid: presentation.uuid}),
    accent: '#F59E0B',
    attr: { 'data-presentation-id': presentation.id }
} only %}
    {% block badge %}<span>Présentation</span>{% endblock %}
    {% block body %}<h3>{{ presentation.title }}</h3>{% endblock %}
    {% block footerLeft %}{{ presentation.updatedAt|format_datetime('long', 'none') }}{% endblock %}
{% endembed %}{% endverbatim %}</code></pre>
    </div>

    <p class="text-sm text-gray-500 mt-4">Fichier : <code class="bg-gray-100 px-1 rounded">templates/_organisms/entity-card/entity-card.html.twig</code></p>
</div>
{% endblock %}