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

{% block title %}Tool Header - 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">Tool Header</h1>
    <p class="text-gray-500 mb-8">En-tête de la bibliothèque d'un outil : pastille produit, titre, badge, description, coût médian et actions. S'utilise avec <code class="bg-gray-100 px-1 rounded">{% verbatim %}{% embed %}{% endverbatim %}</code> pour surcharger le bloc <code class="bg-gray-100 px-1 rounded">actions</code> quand un outil a plusieurs boutons.</p>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Sans couleur d'outil (variante Moodia)</h2>
    <div class="bg-white rounded-2xl border border-gray-100 p-8 mb-8">
        {% embed '_organisms/tool-header/tool-header.html.twig' with {
            icon: 'bubul-moodia',
            title: 'Moodia',
            description: 'Transformez un PDF ou une idée en cours Moodle complet, prêt à être déployé.',
            primaryAction: { label: 'Créer un cours', href: '#', icon: 'plus' },
            class: ''
        } only %}
        {% endembed %}
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Avec couleur d'outil (variante Scormia)</h2>
    <div class="bg-white rounded-2xl border border-gray-100 p-8 mb-8">
        {% embed '_organisms/tool-header/tool-header.html.twig' with {
            icon: 'bubul-scormia',
            title: 'Scormia',
            color: tool_color_details['scormia'],
            description: 'Créez des modules e-learning SCORM interactifs, à votre image.',
            primaryAction: { label: 'Créer un module', href: '#', icon: 'plus' },
            class: ''
        } only %}
        {% endembed %}
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Avec badge et coût médian</h2>
    <div class="bg-white rounded-2xl border border-gray-100 p-8 mb-8">
        {% embed '_organisms/tool-header/tool-header.html.twig' with {
            icon: 'bubul-slidia',
            title: 'Slidia',
            color: tool_color_details['slidia'],
            description: 'Transformez vos idées en présentations.',
            badge: { label: 'BETA' },
            cost: { value: 4500, unit: 'présentation' },
            primaryAction: { label: 'Créer une présentation', href: '#', icon: 'plus' },
            class: ''
        } only %}
        {% endembed %}
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Bloc actions surchargé (plusieurs boutons)</h2>
    <div class="bg-white rounded-2xl border border-gray-100 p-8 mb-8">
        {% embed '_organisms/tool-header/tool-header.html.twig' with {
            icon: 'bubul-scormia',
            title: 'Scormia',
            color: tool_color_details['scormia'],
            description: 'Créez des modules e-learning SCORM interactifs, à votre image.',
            class: ''
        } only %}
            {% block actions %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Importer',
                    variant: 'secondary',
                    size: 'lg',
                    icon: 'upload',
                    iconSize: 'lg',
                    href: '#',
                    radius: 'lg'
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Créer un module',
                    variant: 'custom-gradient',
                    gradientFrom: tool_color_details['scormia'].primary,
                    gradientTo: tool_color_details['scormia'].secondary,
                    size: 'lg',
                    icon: 'plus',
                    iconSize: 'lg',
                    href: '#',
                    radius: 'lg'
                } only %}
            {% endblock %}
        {% endembed %}
    </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">icon</td><td class="px-6 py-3">string</td><td class="px-6 py-3">requis</td><td class="px-6 py-3">Nom d'atome (ex. 'bubul-slidia')</td></tr>
                <tr><td class="px-6 py-3 font-mono">title</td><td class="px-6 py-3">string</td><td class="px-6 py-3">requis</td><td class="px-6 py-3">Nom de l'outil</td></tr>
                <tr><td class="px-6 py-3 font-mono">description</td><td class="px-6 py-3">string</td><td class="px-6 py-3">null</td><td class="px-6 py-3">Phrase de présentation</td></tr>
                <tr><td class="px-6 py-3 font-mono">color</td><td class="px-6 py-3">object</td><td class="px-6 py-3">null</td><td class="px-6 py-3">Entrée de tool_color_details</td></tr>
                <tr><td class="px-6 py-3 font-mono">badge</td><td class="px-6 py-3">object</td><td class="px-6 py-3">null</td><td class="px-6 py-3">{label, variant}</td></tr>
                <tr><td class="px-6 py-3 font-mono">cost</td><td class="px-6 py-3">object</td><td class="px-6 py-3">null</td><td class="px-6 py-3">{value, unit} — coût médian en tokens</td></tr>
                <tr><td class="px-6 py-3 font-mono">primaryAction</td><td class="px-6 py-3">object</td><td class="px-6 py-3">null</td><td class="px-6 py-3">{label, href, icon, disabled}</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">'mb-8'</td><td class="px-6 py-3">Classes du &lt;header&gt;</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">actions</td><td class="px-6 py-3">Zone de droite. Rend primaryAction par défaut.</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/tool-header/tool-header.html.twig' with {
    icon: 'bubul-slidia', title: 'Slidia', color: tool_color_details['slidia'],
    description: 'Transformez vos idées en présentations.',
    primaryAction: { label: 'Créer une présentation', href: path('app_slidia_new'), icon: 'plus' }
} only %}
{% endembed %}

{# ou avec plusieurs boutons #}
{% embed '_organisms/tool-header/tool-header.html.twig' with {
    icon: 'bubul-scormia', title: 'Scormia', color: tool_color_details['scormia']
} only %}
    {% block actions %}
        {# plusieurs boutons ici #}
    {% 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/tool-header/tool-header.html.twig</code></p>
</div>
{% endblock %}