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

{% block title %}Icon - 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">Atomes</span>
                        <span class="text-gray-300">/</span>
                        <h1 class="text-xl font-bold text-gray-900 font-[Poppins]">Icon</h1>
                    </div>
                    <p class="text-sm text-gray-500">Solar Icons Bold Duotone (47) + Alias Bubul (8)</p>
                </div>
            </div>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-6 py-8">

        {# ===== 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 %}{# Couleur unique #}
{% include '_atoms/icon/icon.html.twig' with {
    name: 'check',
    size: 'lg',
    color: 'success'
} %}

{# Duotone avec deux couleurs #}
{% include '_atoms/icon/icon.html.twig' with {
    name: 'bubul-moodia',
    size: 'xl',
    colorPrimary: 'moodia',
    colorSecondary: 'gray',
    opacitySecondary: '0.5'
} %}{% endverbatim %}</code></pre>
                </div>
                <p class="text-sm text-gray-500">Fichier : <code class="bg-gray-100 px-1 rounded">templates/_atoms/icon/icon.html.twig</code></p>
            </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">
                <div class="flex items-end gap-8">
                    {% for sizeKey, sizeLabel in {'xs': '12px', 'sm': '16px', 'md': '20px', 'lg': '24px', 'xl': '32px', '2xl': '40px'} %}
                        <div class="flex flex-col items-center gap-2">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'star', size: sizeKey } %}
                            <span class="text-xs text-gray-500">{{ sizeKey }} ({{ sizeLabel }})</span>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>

        {# ===== COULEURS ===== #}
        <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">Couleurs</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">color</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-6">
                    {% for colorName in ['current', 'primary', 'success', 'warning', 'error', 'info', 'gray'] %}
                        <div class="flex flex-col items-center gap-2">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'lg', color: colorName } %}
                            <span class="text-xs text-gray-500">{{ colorName }}</span>
                        </div>
                    {% endfor %}
                    <div class="flex flex-col items-center gap-2 bg-gray-800 p-3 rounded-lg">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'lg', color: 'white' } %}
                        <span class="text-xs text-gray-300">white</span>
                    </div>
                </div>
            </div>
        </section>

        {# ===== DUOTONE ===== #}
        <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">Duotone (deux couleurs)</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètres : <code class="bg-gray-200 px-1 rounded">colorPrimary</code>, <code class="bg-gray-200 px-1 rounded">colorSecondary</code>, <code class="bg-gray-200 px-1 rounded">opacitySecondary</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-8">
                    <div class="flex flex-col items-center gap-2">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'user', size: 'xl', color: 'primary' } %}
                        <span class="text-xs text-gray-500">Couleur unique</span>
                    </div>
                    <div class="flex flex-col items-center gap-2">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'user', size: 'xl', colorPrimary: 'primary', colorSecondary: 'gray' } %}
                        <span class="text-xs text-gray-500">Primary + Gray</span>
                    </div>
                    <div class="flex flex-col items-center gap-2">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'user', size: 'xl', colorPrimary: 'success', colorSecondary: 'success', opacitySecondary: '0.3' } %}
                        <span class="text-xs text-gray-500">Opacity 0.3</span>
                    </div>
                    <div class="flex flex-col items-center gap-2">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'user', size: 'xl', colorPrimary: 'error', colorSecondary: 'warning' } %}
                        <span class="text-xs text-gray-500">Error + Warning</span>
                    </div>
                </div>
            </div>
        </section>

        {# ===== SOLAR ICONS - TOUTES ===== #}
        <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">Solar Icons <span class="text-sm font-normal text-gray-500">(68 icônes)</span></h2>
                <p class="text-sm text-gray-500 mt-1">Source : <a href="https://solar-icons.vercel.app" target="_blank" class="text-primary hover:underline">solar-icons.vercel.app</a> - Style Bold Duotone</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-4">
                    {% for icon in [
                        'alert', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'bell',
                        'book', 'buildings', 'calendar', 'cart', 'chart', 'chat', 'check',
                        'check-circle', 'chevron-left', 'chevron-right', 'chevrons-left',
                        'chevrons-right', 'clock', 'close', 'cloud', 'crown', 'dialog',
                        'document', 'download', 'edit', 'exit', 'eye', 'file-text', 'fire',
                        'folder', 'heart', 'help', 'home', 'home-smile', 'inbox', 'info',
                        'key', 'list', 'lock', 'logout', 'mail', 'message', 'minus', 'plus',
                        'power', 'presentation-graph', 'refresh', 'rocket', 'search', 'send',
                        'server', 'settings', 'shield', 'star', 'target', 'token', 'trash',
                        'unlock', 'user', 'user-id', 'users', 'users-group', 'users-group-two',
                        'wallet', 'warning', 'widget-add', 'x'
                    ] %}
                        <div class="flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer group" title="{{ icon }}">
                            {% include '_atoms/icon/icon.html.twig' with { name: icon, size: 'lg', class: 'group-hover:text-primary transition-colors' } %}
                            <span class="text-xs text-gray-500 truncate w-full text-center">{{ icon }}</span>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>

        {# ===== BUBUL ALIASES ===== #}
        <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">Alias Bubul <span class="text-sm font-normal text-gray-500">(8 alias)</span></h2>
                <p class="text-sm text-gray-500 mt-1">Noms sémantiques qui pointent vers des icônes Solar</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-4 md:grid-cols-8 gap-4">
                    {% for alias, data in {
                        'bubul-moodia': {'color': 'primary', 'solar': 'widget-add'},
                        'bubul-serenia': {'color': 'primary', 'solar': 'chat'},
                        'bubul-slidia': {'color': 'primary', 'solar': 'presentation-graph'},
                        'bubul-sam': {'color': 'primary', 'solar': 'user-id'},
                        'bubul-dashboard': {'color': 'primary', 'solar': 'home-smile'},
                        'bubul-entreprise': {'color': 'primary', 'solar': 'buildings'},
                        'bubul-utilisateur': {'color': 'primary', 'solar': 'users-group-two'},
                        'bubul-contrat': {'color': 'primary', 'solar': 'file-text'}
                    } %}
                        <div class="flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-gray-50 transition-colors" title="{{ alias }} → {{ data.solar }}">
                            {% include '_atoms/icon/icon.html.twig' with { name: alias, size: 'xl', color: data.color } %}
                            <span class="text-xs font-medium text-gray-700">{{ alias }}</span>
                            <span class="text-[10px] text-gray-400">→ {{ data.solar }}</span>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>

        {# ===== EXEMPLE : BOUTONS ===== #}
        <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 : Boutons avec icônes</h2>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    <button class="inline-flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-lg font-medium hover:bg-primary-dark transition-colors">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'plus', size: 'sm', color: 'white' } %}
                        Ajouter
                    </button>
                    <button class="inline-flex items-center gap-2 bg-success text-white px-4 py-2 rounded-lg font-medium">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'check', size: 'sm', color: 'white' } %}
                        Confirmer
                    </button>
                    <button class="inline-flex items-center gap-2 border border-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-50 transition-colors">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'download', size: 'sm' } %}
                        Télécharger
                    </button>
                    <button class="inline-flex items-center gap-2 text-error px-4 py-2 rounded-lg font-medium hover:bg-error/10 transition-colors">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'trash', size: 'sm', color: 'error' } %}
                        Supprimer
                    </button>
                </div>
            </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>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'icône</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">xs, sm, md, lg, xl, 2xl</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>color</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">current</td><td class="py-2 px-3">Couleur unique pour les deux couches</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>colorPrimary</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Couleur de la couche primaire (duotone)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>colorSecondary</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Couleur de la couche secondaire (duotone)</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>opacitySecondary</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">0.5</td><td class="py-2 px-3">Opacité de la couche secondaire (0-1)</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 CSS additionnelles</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

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