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

{% block title %}Tool 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">Molecules</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">Tool Card</h1>
                    </div>
                    <p class="text-sm text-gray-500">Carte d'outil pour le dashboard avec statistiques, sparkline 30 jours et gradient decoratif</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-amber-100 text-amber-700 rounded border border-amber-200 font-medium text-sm">Badge</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-600 font-bold text-lg">=</span>
                <span class="px-4 py-2 bg-green-500 text-white rounded-lg font-semibold shadow-sm">ToolCard</span>
            </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 %}{% include '_molecules/tool-card/tool-card.html.twig' with {
    name: 'Moodia',
    code: 'moodia',
    tagline: 'PDF → Cours Moodle',
    href: '/moodia',
    isNew: true,
    stats: {
        generated: 42,
        items: 'cours',
        tokens: 125000,
        wh: 37.5,
        lastUsed: 'now'|date('Y-m-d')
    },
    percentage: 45,
    weekUsage: [3, 1, 0, 2, 4, 1, 3, 2, 0, 1, 5, 2, 3, 1, 4, 2, 0, 3, 1, 2, 4, 3, 1, 0, 2, 5, 3, 2, 1, 4]
} %}{% endverbatim %}</code></pre>
                </div>
                <p class="text-sm text-gray-500">Fichier : <code class="bg-gray-100 px-1 rounded">templates/_molecules/tool-card/tool-card.html.twig</code></p>
            </div>
        </section>

        {# ===== COULEURS PAR OUTIL ===== #}
        <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="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/></svg>
                Couleurs par outil
            </h2>
            <p class="text-sm text-gray-600 mb-4">Chaque outil a sa propre couleur d'accent derivee du parametre <code class="bg-blue-100 px-1 rounded">code</code>.</p>
            <div class="overflow-x-auto">
                <table class="w-full text-sm bg-white rounded-lg overflow-hidden">
                    <thead>
                        <tr class="border-b border-blue-200 bg-blue-100/50">
                            <th class="text-left py-2 px-3 font-medium text-blue-900">Code</th>
                            <th class="text-left py-2 px-3 font-medium text-blue-900">Couleur</th>
                            <th class="text-left py-2 px-3 font-medium text-blue-900">Token CSS</th>
                            <th class="text-left py-2 px-3 font-medium text-blue-900">Apercu</th>
                        </tr>
                    </thead>
                    <tbody class="text-gray-600">
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>moodia</code></td><td class="py-2 px-3">Bleu</td><td class="py-2 px-3"><code>primary</code></td><td class="py-2 px-3"><span class="inline-block w-5 h-5 rounded bg-primary"></span></td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>serenia</code></td><td class="py-2 px-3">Violet</td><td class="py-2 px-3"><code>cohorts</code></td><td class="py-2 px-3"><span class="inline-block w-5 h-5 rounded bg-cohorts"></span></td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>slidia</code></td><td class="py-2 px-3">Orange</td><td class="py-2 px-3"><code>warning</code></td><td class="py-2 px-3"><span class="inline-block w-5 h-5 rounded bg-warning"></span></td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>monalisia</code></td><td class="py-2 px-3">Rose</td><td class="py-2 px-3"><code>pink</code></td><td class="py-2 px-3"><span class="inline-block w-5 h-5 rounded bg-pink"></span></td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>castia</code></td><td class="py-2 px-3">Vert</td><td class="py-2 px-3"><code>success</code></td><td class="py-2 px-3"><span class="inline-block w-5 h-5 rounded bg-success"></span></td></tr>
                        <tr><td class="py-2 px-3"><code>sam</code></td><td class="py-2 px-3">Cyan</td><td class="py-2 px-3"><code>info</code></td><td class="py-2 px-3"><span class="inline-block w-5 h-5 rounded bg-info"></span></td></tr>
                    </tbody>
                </table>
            </div>
        </section>

        {# ===== TOUS LES OUTILS ===== #}
        <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">Tous les outils</h2>
                <p class="text-sm text-gray-500 mt-1">Grille de 6 outils avec leurs couleurs respectives</p>
            </div>
            <div class="p-6 bg-gray-100">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

                    {% include '_molecules/tool-card/tool-card.html.twig' with {
                        name: 'Moodia',
                        code: 'moodia',
                        tagline: 'PDF → Cours Moodle',
                        href: '#',
                        isNew: true,
                        stats: {
                            generated: 42,
                            items: 'cours',
                            tokens: 125400,
                            wh: 37.6,
                            lastUsed: 'now'|date_modify('-1 days')
                        },
                        weekUsage: [3, 1, 0, 2, 4, 1, 3, 2, 0, 1, 5, 2, 3, 1, 4, 2, 0, 3, 1, 2, 4, 3, 1, 0, 2, 5, 3, 2, 1, 4]
                    } %}

                    {% include '_molecules/tool-card/tool-card.html.twig' with {
                        name: 'Serenia',
                        code: 'serenia',
                        tagline: 'Assistant IA',
                        href: '#',
                        stats: {
                            generated: 156,
                            items: 'conversations',
                            tokens: 89200,
                            wh: 26.8,
                            lastUsed: 'now'|date_modify('-2 days')
                        },
                        weekUsage: [5, 3, 4, 2, 6, 3, 5, 4, 2, 3, 7, 4, 5, 3, 6, 4, 2, 5, 3, 4, 6, 5, 3, 2, 4, 7, 5, 4, 3, 6]
                    } %}

                    {% include '_molecules/tool-card/tool-card.html.twig' with {
                        name: 'Slidia',
                        code: 'slidia',
                        tagline: 'Presentations PPTX',
                        href: '#',
                        stats: {
                            generated: 23,
                            items: 'presentations',
                            tokens: 67800,
                            wh: 20.3,
                            lastUsed: 'now'|date_modify('-5 days')
                        },
                        weekUsage: [1, 0, 2, 1, 0, 3, 1, 2, 0, 1, 2, 1, 0, 3, 1, 2, 0, 1, 3, 1, 0, 2, 1, 0, 3, 2, 1, 0, 2, 1]
                    } %}

                    {% include '_molecules/tool-card/tool-card.html.twig' with {
                        name: 'Monalisia',
                        code: 'monalisia',
                        tagline: 'Images IA',
                        href: '#',
                        stats: {
                            generated: 87,
                            items: 'images',
                            tokens: 43500,
                            wh: 13.1,
                            lastUsed: 'now'|date_modify('-3 days')
                        },
                        weekUsage: [2, 4, 1, 3, 2, 5, 1, 3, 4, 2, 1, 5, 3, 2, 4, 1, 3, 2, 5, 1, 4, 3, 2, 1, 5, 3, 2, 4, 1, 3]
                    } %}

                    {% include '_molecules/tool-card/tool-card.html.twig' with {
                        name: 'Castia',
                        code: 'castia',
                        tagline: 'Podcasts audio',
                        href: '#',
                        stats: {
                            generated: 12,
                            items: 'podcasts',
                            tokens: 31200,
                            wh: 9.4,
                            lastUsed: 'now'|date_modify('-7 days')
                        },
                        weekUsage: [0, 1, 0, 0, 2, 0, 1, 0, 0, 1, 0, 2, 0, 1, 0, 0, 1, 2, 0, 1, 0, 0, 2, 0, 1, 0, 1, 0, 2, 0]
                    } %}

                    {% include '_molecules/tool-card/tool-card.html.twig' with {
                        name: 'SAM',
                        code: 'sam',
                        tagline: 'Suivi pedagogique',
                        href: '#',
                        stats: {
                            generated: 34,
                            items: 'rapports',
                            tokens: 18600,
                            wh: 5.6,
                            lastUsed: 'now'|date_modify('-10 days')
                        },
                        weekUsage: [1, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 0, 2, 1, 0, 1, 0, 1, 2, 0, 1, 0, 1, 2, 0, 1, 0, 1, 2, 1]
                    } %}

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

        {# ===== VERROUILLE ===== #}
        <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">Verrouille</h2>
                <p class="text-sm text-gray-500 mt-1">Parametre : <code class="bg-gray-200 px-1 rounded">locked: true</code></p>
            </div>
            <div class="p-6">
                <div class="max-w-sm">
                    {% include '_molecules/tool-card/tool-card.html.twig' with {
                        name: 'Slidia',
                        code: 'slidia',
                        tagline: 'Presentations PPTX',
                        locked: true,
                        stats: {
                            generated: 0,
                            items: 'presentations',
                            tokens: 0,
                            wh: 0
                        }
                    } %}
                </div>
            </div>
        </section>

        {# ===== PARAMETRES ===== #}
        <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">Parametres</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">Parametre</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">Defaut</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>name</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">(requis)</td><td class="py-2 px-3">Nom de l'outil</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>code</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">(requis)</td><td class="py-2 px-3">Code de l'outil (moodia, serenia, slidia, monalisia, castia, sam)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>tagline</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 de l'outil</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 de l'outil</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">Lien vers l'outil (rend la carte cliquable)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>isNew</code></td><td class="py-2 px-3">bool</td><td class="py-2 px-3">false</td><td class="py-2 px-3">Afficher le badge NEW</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>stats</code></td><td class="py-2 px-3">object</td><td class="py-2 px-3">{}</td><td class="py-2 px-3">Statistiques de l'outil</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3 pl-6"><code>stats.generated</code></td><td class="py-2 px-3">int</td><td class="py-2 px-3">0</td><td class="py-2 px-3">Nombre de contenus generes</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3 pl-6"><code>stats.items</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">'contenus'</td><td class="py-2 px-3">Label des contenus (cours, images, presentations...)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3 pl-6"><code>stats.tokens</code></td><td class="py-2 px-3">int</td><td class="py-2 px-3">0</td><td class="py-2 px-3">Tokens consommes</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3 pl-6"><code>stats.wh</code></td><td class="py-2 px-3">float</td><td class="py-2 px-3">0</td><td class="py-2 px-3">Energie en Wh</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3 pl-6"><code>stats.lastUsed</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Derniere utilisation (date)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>percentage</code></td><td class="py-2 px-3">int</td><td class="py-2 px-3">0</td><td class="py-2 px-3">Pourcentage tokens vs total</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>weekUsage</code></td><td class="py-2 px-3">array</td><td class="py-2 px-3">[]</td><td class="py-2 px-3">Usage par jour (30 valeurs pour sparkline)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>locked</code></td><td class="py-2 px-3">bool</td><td class="py-2 px-3">false</td><td class="py-2 px-3">Outil verrouille (grise, non cliquable)</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>

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