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

{% block title %}Tool Toolbar - 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 Toolbar</h1>
    <p class="text-gray-500 mb-8">Ligne de filtres et de recherche des bibliothèques d'outils. Les deux zones (onglets et recherche) sont indépendantes et facultatives. S'utilise avec <code class="bg-gray-100 px-1 rounded">{% verbatim %}{% embed %}{% endverbatim %}</code> pour surcharger les blocs <code class="bg-gray-100 px-1 rounded">leading</code> et <code class="bg-gray-100 px-1 rounded">trailing</code>.</p>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Onglets et recherche (variante Moodia)</h2>
    <div class="bg-gray-50 rounded-2xl border border-gray-100 p-8 mb-8">
        {% embed '_organisms/tool-toolbar/tool-toolbar.html.twig' with {
            filters: [
                { id: 'all', label: 'Tous', count: 12, href: '#' },
                { id: 'course', label: 'Cours', count: 9, href: '#' },
                { id: 'quiz', label: 'Quiz', count: 3, href: '#' }
            ],
            active: 'all',
            name: 'generationType',
            search: { id: 'ds-moodia-search', placeholder: 'Rechercher un cours…', value: '' }
        } only %}
        {% endembed %}
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Recherche seule (sans filtres)</h2>
    <div class="bg-gray-50 rounded-2xl border border-gray-100 p-8 mb-8">
        {% embed '_organisms/tool-toolbar/tool-toolbar.html.twig' with {
            search: { id: 'ds-slidia-search', placeholder: 'Rechercher une présentation…', value: '' }
        } only %}
        {% endembed %}
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Onglets seuls (sans recherche)</h2>
    <div class="bg-gray-50 rounded-2xl border border-gray-100 p-8 mb-8">
        {% embed '_organisms/tool-toolbar/tool-toolbar.html.twig' with {
            filters: [
                { id: 'quiz', label: 'Module + Quiz', count: 6, href: '#' },
                { id: 'noquiz', label: 'Module SCORM', count: 4, href: '#' }
            ],
            active: 'quiz',
            name: 'moduleType'
        } only %}
        {% endembed %}
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Bloc leading surchargé (filtre de masque Slidia)</h2>
    <div class="bg-gray-50 rounded-2xl border border-gray-100 p-8 mb-8">
        {% embed '_organisms/tool-toolbar/tool-toolbar.html.twig' with {
            search: { id: 'ds-slidia-search-mask', placeholder: 'Rechercher une présentation…', value: '' }
        } only %}
            {% block leading %}
                <div class="shrink-0">
                    {% include '_atoms/form/select.html.twig' with {
                        name: 'mask',
                        options: [
                            { value: '', label: 'Tous les masques' },
                            { value: 'business', label: 'Business' },
                            { value: 'creative', label: 'Créatif' }
                        ]
                    } only %}
                </div>
            {% 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">filters</td><td class="px-6 py-3">array</td><td class="px-6 py-3">null</td><td class="px-6 py-3">Transmis à filter-tabs</td></tr>
                <tr><td class="px-6 py-3 font-mono">active</td><td class="px-6 py-3">string</td><td class="px-6 py-3">null</td><td class="px-6 py-3">Filtre actif</td></tr>
                <tr><td class="px-6 py-3 font-mono">name</td><td class="px-6 py-3">string</td><td class="px-6 py-3">'filter'</td><td class="px-6 py-3">Nom du groupe de filtres</td></tr>
                <tr><td class="px-6 py-3 font-mono">search</td><td class="px-6 py-3">object</td><td class="px-6 py-3">null</td><td class="px-6 py-3">Transmis à search-input (id, placeholder, …)</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">'flex flex-col md:flex-row md:items-stretch gap-3 md:gap-4 mb-6'</td><td class="px-6 py-3">Classes 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">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">leading</td><td class="px-6 py-3">filter-tabs si <code>filters</code></td><td class="px-6 py-3">Zone de gauche</td></tr>
                <tr><td class="px-6 py-3 font-mono">trailing</td><td class="px-6 py-3">search-input si <code>search</code></td><td class="px-6 py-3">Zone de droite</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-toolbar/tool-toolbar.html.twig' with {
    filters: [{ id: 'all', label: 'Tous', count: 12, href: path('app_moodia') }],
    active: typeFilter, name: 'generationType',
    search: { id: 'moodia-search', placeholder: 'Rechercher un cours…', value: search,
              action: 'input->shared--library-search#search' }
} only %}
{% endembed %}

{# ou avec un bloc leading surchargé (filtre de masque) #}
{% embed '_organisms/tool-toolbar/tool-toolbar.html.twig' with {
    search: { id: 'slidia-search', placeholder: 'Rechercher une présentation…', value: search }
} only %}
    {% block leading %}
        {# filtre de masque personnalisé #}
    {% 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-toolbar/tool-toolbar.html.twig</code></p>
</div>
{% endblock %}