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

{% block title %}Kbd - 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]">Kbd</h1>
                    </div>
                    <p class="text-sm text-gray-500">Affichage de raccourcis clavier</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 %}{# Touche simple #}
{% include '_atoms/kbd/kbd.html.twig' with {
    key: 'Enter'
} %}

{# Combinaison de touches #}
{% include '_atoms/kbd/kbd.html.twig' with {
    keys: ['Ctrl', 'S']
} %}

{# Raccourci Mac #}
{% include '_atoms/kbd/kbd.html.twig' with {
    keys: ['⌘', 'Shift', 'P']
} %}{% endverbatim %}</code></pre>
                </div>
                <p class="text-sm text-gray-500">Fichier : <code class="bg-gray-100 px-1 rounded">templates/_atoms/kbd/kbd.html.twig</code></p>
            </div>
        </section>

        {# ===== TOUCHES SIMPLES ===== #}
        <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">Touches simples</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">key</code></p>
            </div>
            <div class="p-6">
                <div class="flex flex-wrap items-center gap-4">
                    {% include '_atoms/kbd/kbd.html.twig' with { key: 'A' } %}
                    {% include '_atoms/kbd/kbd.html.twig' with { key: 'Enter' } %}
                    {% include '_atoms/kbd/kbd.html.twig' with { key: 'Esc' } %}
                    {% include '_atoms/kbd/kbd.html.twig' with { key: 'Tab' } %}
                    {% include '_atoms/kbd/kbd.html.twig' with { key: 'Space' } %}
                    {% include '_atoms/kbd/kbd.html.twig' with { key: '↑' } %}
                    {% include '_atoms/kbd/kbd.html.twig' with { key: '↓' } %}
                    {% include '_atoms/kbd/kbd.html.twig' with { key: '←' } %}
                    {% include '_atoms/kbd/kbd.html.twig' with { key: '→' } %}
                </div>
            </div>
        </section>

        {# ===== COMBINAISONS ===== #}
        <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">Combinaisons de touches</h2>
                <p class="text-sm text-gray-500 mt-1">Paramètre : <code class="bg-gray-200 px-1 rounded">keys</code> (array)</p>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-32">Sauvegarder</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'S'] } %}
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-32">Copier</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'C'] } %}
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-32">Coller</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'V'] } %}
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-32">Annuler</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'Z'] } %}
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-32">Rechercher</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'Shift', 'F'] } %}
                </div>
            </div>
        </section>

        {# ===== RACCOURCIS MAC ===== #}
        <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">Raccourcis Mac</h2>
                <p class="text-sm text-gray-500 mt-1">Utilisez les symboles Mac : ⌘ ⌥ ⇧ ⌃</p>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-32">Sauvegarder</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['⌘', 'S'] } %}
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-32">Préférences</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['⌘', ','] } %}
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-32">Spotlight</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['⌘', 'Space'] } %}
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-32">Screenshot</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['⌘', '⇧', '4'] } %}
                </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-4">
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-20">sm</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'S'], size: 'sm' } %}
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-20">md</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'S'], size: 'md' } %}
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-20">lg</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'S'], size: 'lg' } %}
                </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-4">
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-20">default</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'S'], variant: 'default' } %}
                </div>
                <div class="flex items-center gap-4">
                    <span class="text-gray-600 w-20">minimal</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'S'], variant: 'minimal' } %}
                </div>
                <div class="flex items-center gap-4 p-4 bg-gray-800 rounded-lg">
                    <span class="text-gray-300 w-20">dark</span>
                    {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'S'], variant: 'dark' } %}
                </div>
            </div>
        </section>

        {# ===== EXEMPLE CONCRET ===== #}
        <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 : Aide raccourcis</h2>
            </div>
            <div class="p-6">
                <div class="max-w-md">
                    <h3 class="font-medium text-gray-900 mb-4">Raccourcis clavier Serenia</h3>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="text-gray-600">Nouveau chat</span>
                            {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'N'], size: 'sm' } %}
                        </div>
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="text-gray-600">Rechercher</span>
                            {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'K'], size: 'sm' } %}
                        </div>
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="text-gray-600">Envoyer message</span>
                            {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'Enter'], size: 'sm' } %}
                        </div>
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="text-gray-600">Fermer</span>
                            {% include '_atoms/kbd/kbd.html.twig' with { key: 'Esc', size: 'sm' } %}
                        </div>
                        <div class="flex items-center justify-between py-2">
                            <span class="text-gray-600">Aide</span>
                            {% include '_atoms/kbd/kbd.html.twig' with { key: '?', size: 'sm' } %}
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== TINYMCE ===== #}
        <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">Raccourcis TinyMCE</h2>
                <p class="text-sm text-gray-500 mt-1">Raccourcis de l'éditeur de texte</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {# Formatage de base #}
                    <div>
                        <h4 class="font-medium text-gray-900 mb-4">Formatage</h4>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Gras</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'B'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Italique</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'I'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Souligné</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'U'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Barré</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Alt', 'Shift', '5'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2">
                                <span class="text-gray-600">Supprimer formatage</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'Space'], size: 'sm' } %}
                            </div>
                        </div>
                    </div>

                    {# Édition #}
                    <div>
                        <h4 class="font-medium text-gray-900 mb-4">Édition</h4>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Annuler</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'Z'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Rétablir</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'Y'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Tout sélectionner</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'A'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Copier</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'C'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2">
                                <span class="text-gray-600">Coller</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'V'], size: 'sm' } %}
                            </div>
                        </div>
                    </div>

                    {# Liens et médias #}
                    <div>
                        <h4 class="font-medium text-gray-900 mb-4">Liens & Médias</h4>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Insérer lien</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'K'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2">
                                <span class="text-gray-600">Supprimer lien</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'Shift', 'K'], size: 'sm' } %}
                            </div>
                        </div>
                    </div>

                    {# Structure #}
                    <div>
                        <h4 class="font-medium text-gray-900 mb-4">Structure</h4>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Titre 1</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Alt', 'Shift', '1'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Titre 2</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Alt', 'Shift', '2'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2 border-b border-gray-100">
                                <span class="text-gray-600">Paragraphe</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Alt', 'Shift', '7'], size: 'sm' } %}
                            </div>
                            <div class="flex items-center justify-between py-2">
                                <span class="text-gray-600">Liste à puces</span>
                                {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Alt', 'Shift', 'U'], size: 'sm' } %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        {# ===== INLINE ===== #}
        <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 inline</h2>
            </div>
            <div class="p-6">
                <p class="text-gray-600">
                    Appuyez sur {% include '_atoms/kbd/kbd.html.twig' with { keys: ['Ctrl', 'S'], size: 'sm' } %} pour sauvegarder
                    ou {% include '_atoms/kbd/kbd.html.twig' with { key: 'Esc', size: 'sm' } %} pour annuler.
                </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>key</code></td><td class="py-2 px-3">string</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Touche unique</td></tr>
                        <tr class="border-b border-gray-100"><td class="py-2 px-3"><code>keys</code></td><td class="py-2 px-3">array</td><td class="py-2 px-3">null</td><td class="py-2 px-3">Combinaison de touches</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><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, minimal, dark</td></tr>
                    </tbody>
                </table>
            </div>
        </section>

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