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

{% block title %}Tabs - 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]">Tabs</h1>
                    </div>
                    <p class="text-sm text-gray-500">Système d'onglets pour organiser le contenu</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">Badge</span>
                <span class="text-green-400 font-bold">+</span>
                <span class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded border border-gray-200 font-medium text-sm">JS</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">Tabs</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/tabs/tabs.html.twig' with {
    id: 'my-tabs',
    tabs: [
        { id: 'general', label: 'Général', icon: 'settings' },
        { id: 'security', label: 'Sécurité', icon: 'shield' },
        { id: 'notifications', label: 'Notifications', icon: 'bell', badge: '3' }
    ],
    active: 'general'
} %}{% endverbatim %}</code></pre>
                </div>
                <p class="text-sm text-gray-500">Fichier : <code class="bg-gray-100 px-1 rounded">templates/_molecules/tabs/tabs.html.twig</code></p>
            </div>
        </section>

        {# ===== EXEMPLE SIMPLE ===== #}
        <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">Exemple simple</h2>
            </div>
            <div class="p-6">
                {% include '_molecules/tabs/tabs.html.twig' with {
                    id: 'demo-simple',
                    tabs: [
                        { id: 'tab1', label: 'Premier onglet' },
                        { id: 'tab2', label: 'Deuxième onglet' },
                        { id: 'tab3', label: 'Troisième onglet' }
                    ],
                    active: 'tab1'
                } %}

                <div class="mt-4 p-4 bg-gray-50 rounded-lg">
                    <div data-tab-panel-for="demo-simple" data-tab-id="tab1">
                        <p class="text-gray-600">Contenu du premier onglet. Lorem ipsum dolor sit amet.</p>
                    </div>
                    <div data-tab-panel-for="demo-simple" data-tab-id="tab2" hidden>
                        <p class="text-gray-600">Contenu du deuxième onglet. Consectetur adipiscing elit.</p>
                    </div>
                    <div data-tab-panel-for="demo-simple" data-tab-id="tab3" hidden>
                        <p class="text-gray-600">Contenu du troisième onglet. Sed do eiusmod tempor.</p>
                    </div>
                </div>
            </div>
        </section>

        {# ===== AVEC ICÔNES ET BADGES ===== #}
        <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 icônes et badges</h2>
            </div>
            <div class="p-6">
                {% include '_molecules/tabs/tabs.html.twig' with {
                    id: 'demo-icons',
                    tabs: [
                        { id: 'inbox', label: 'Inbox', icon: 'inbox', badge: '12' },
                        { id: 'sent', label: 'Envoyés', icon: 'send' },
                        { id: 'drafts', label: 'Brouillons', icon: 'edit', badge: '3' },
                        { id: 'trash', label: 'Corbeille', icon: 'trash' }
                    ],
                    active: 'inbox'
                } %}

                <div class="mt-4 p-4 bg-gray-50 rounded-lg">
                    <div data-tab-panel-for="demo-icons" data-tab-id="inbox">
                        <p class="text-gray-600">12 nouveaux messages dans votre boîte de réception.</p>
                    </div>
                    <div data-tab-panel-for="demo-icons" data-tab-id="sent" hidden>
                        <p class="text-gray-600">Messages envoyés récemment.</p>
                    </div>
                    <div data-tab-panel-for="demo-icons" data-tab-id="drafts" hidden>
                        <p class="text-gray-600">3 brouillons en attente.</p>
                    </div>
                    <div data-tab-panel-for="demo-icons" data-tab-id="trash" hidden>
                        <p class="text-gray-600">Corbeille vide.</p>
                    </div>
                </div>
            </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 space-y-8">

                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Default (underline border)</p>
                    {% include '_molecules/tabs/tabs.html.twig' with {
                        id: 'demo-default',
                        tabs: [
                            { id: 'overview', label: 'Aperçu' },
                            { id: 'analytics', label: 'Analytiques' },
                            { id: 'reports', label: 'Rapports' }
                        ],
                        variant: 'default',
                        active: 'overview'
                    } %}
                </div>

                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Pills</p>
                    {% include '_molecules/tabs/tabs.html.twig' with {
                        id: 'demo-pills',
                        tabs: [
                            { id: 'overview', label: 'Aperçu' },
                            { id: 'analytics', label: 'Analytiques' },
                            { id: 'reports', label: 'Rapports' }
                        ],
                        variant: 'pills',
                        active: 'overview'
                    } %}
                </div>

                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Underline (sans bordure)</p>
                    {% include '_molecules/tabs/tabs.html.twig' with {
                        id: 'demo-underline',
                        tabs: [
                            { id: 'overview', label: 'Aperçu' },
                            { id: 'analytics', label: 'Analytiques' },
                            { id: 'reports', label: 'Rapports' }
                        ],
                        variant: 'underline',
                        active: 'overview'
                    } %}
                </div>

                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Settings (style page paramètres)</p>
                    {% include '_molecules/tabs/tabs.html.twig' with {
                        id: 'demo-settings',
                        tabs: [
                            { id: 'account', label: 'Compte', icon: 'user' },
                            { id: 'moodia', label: 'Moodia', icon: 'book' },
                            { id: 'serenia', label: 'Serenia', icon: 'chat' },
                         
                            { id: 'developer', label: 'Développeur', icon: 'settings', right: true },
                               { id: 'slidia', label: 'Slidia', icon: 'presentation-graph' },
                        ],
                        variant: 'settings',
                        active: 'account'
                    } %}
                    <p class="mt-3 text-sm text-gray-500">Icônes en grayscale par défaut, colorées au hover/actif. Scale 1.1 au hover. Dernier tab aligné à droite avec <code class="bg-gray-100 px-1 rounded">right: true</code>.</p>
                </div>

            </div>
        </section>

        {# ===== TAILLES ===== #}
        <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">Tailles</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">size</code></p>
            </div>
            <div class="p-6 space-y-6">

                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Small (sm)</p>
                    {% include '_molecules/tabs/tabs.html.twig' with {
                        id: 'demo-sm',
                        tabs: [
                            { id: 'all', label: 'Tous' },
                            { id: 'active', label: 'Actifs' },
                            { id: 'archived', label: 'Archivés' }
                        ],
                        size: 'sm',
                        active: 'all'
                    } %}
                </div>

                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Medium (md) - défaut</p>
                    {% include '_molecules/tabs/tabs.html.twig' with {
                        id: 'demo-md',
                        tabs: [
                            { id: 'all', label: 'Tous' },
                            { id: 'active', label: 'Actifs' },
                            { id: 'archived', label: 'Archivés' }
                        ],
                        size: 'md',
                        active: 'all'
                    } %}
                </div>

                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wider mb-3">Large (lg)</p>
                    {% include '_molecules/tabs/tabs.html.twig' with {
                        id: 'demo-lg',
                        tabs: [
                            { id: 'all', label: 'Tous' },
                            { id: 'active', label: 'Actifs' },
                            { id: 'archived', label: 'Archivés' }
                        ],
                        size: 'lg',
                        active: 'all'
                    } %}
                </div>

            </div>
        </section>

        {# ===== FULL WIDTH ===== #}
        <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">Pleine largeur</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">fullWidth: true</code></p>
            </div>
            <div class="p-6">
                {% include '_molecules/tabs/tabs.html.twig' with {
                    id: 'demo-full',
                    tabs: [
                        { id: 'daily', label: 'Jour' },
                        { id: 'weekly', label: 'Semaine' },
                        { id: 'monthly', label: 'Mois' },
                        { id: 'yearly', label: 'Année' }
                    ],
                    variant: 'pills',
                    fullWidth: true,
                    active: 'weekly'
                } %}
            </div>
        </section>

        {# ===== ONGLET DÉSACTIVÉ ===== #}
        <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">Onglet désactivé</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre par onglet : <code class="bg-gray-200 px-1 rounded">disabled: true</code></p>
            </div>
            <div class="p-6">
                {% include '_molecules/tabs/tabs.html.twig' with {
                    id: 'demo-disabled',
                    tabs: [
                        { id: 'basic', label: 'Basique', icon: 'star' },
                        { id: 'pro', label: 'Pro', icon: 'crown' },
                        { id: 'enterprise', label: 'Entreprise', icon: 'building', disabled: true }
                    ],
                    active: 'basic'
                } %}
                <p class="mt-3 text-sm text-gray-500">L'onglet "Entreprise" est désactivé (fonctionnalité non disponible).</p>
            </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>tabs</code></td><td class="py-2 px-3">array</td><td class="py-2 px-3">(requis)</td><td class="py-2 px-3">Liste des onglets</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>tabs[].id</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">(requis)</td><td class="py-2 px-3">Identifiant unique</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>tabs[].label</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">(requis)</td><td class="py-2 px-3">Texte de l'onglet</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>tabs[].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>tabs[].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 (compteur)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>tabs[].disabled</code></td><td class="py-2 px-3">bool</td><td class="py-2 px-3">false</td><td class="py-2 px-3">Désactive l'onglet</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>tabs[].right</code></td><td class="py-2 px-3">bool</td><td class="py-2 px-3">false</td><td class="py-2 px-3">Aligne l'onglet à droite</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>active</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">premier</td><td class="py-2 px-3">ID de l'onglet actif</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, pills, underline, settings</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>size</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">md</td><td class="py-2 px-3">sm, md, lg</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>fullWidth</code></td><td class="py-2 px-3">bool</td><td class="py-2 px-3">false</td><td class="py-2 px-3">Onglets en pleine largeur</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>id</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">auto</td><td class="py-2 px-3">ID du conteneur</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>

        {# ===== API JAVASCRIPT ===== #}
        <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">API JavaScript</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>// Changer d'onglet programmatiquement
switchTab('my-tabs', 'settings');

// Écouter les changements d'onglet
document.getElementById('my-tabs').addEventListener('tabChange', (e) => {
    console.log('Onglet actif:', e.detail.tabId);
});</code></pre>
                </div>
                <p class="text-sm text-gray-500">Les panels avec <code class="bg-gray-100 px-1 rounded">data-tab-panel-for</code> sont automatiquement masqués/affichés.</p>
            </div>
        </section>

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