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

{% block title %}Design System — Search Input{% 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">Search Input</h1>
    <p class="text-gray-500 mb-8">Champ de recherche des bibliothèques d'outils. Sans comportement propre : le pilotage passe par <code class="bg-gray-100 px-1 rounded">action</code>.</p>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Aperçu</h2>
    <div class="bg-white rounded-2xl border border-gray-100 p-8 mb-8">
        <div class="flex flex-col md:flex-row md:items-stretch gap-4">
            {% include '_molecules/search-input/search-input.html.twig' with {
                id: 'demo-search',
                placeholder: 'Rechercher un module…'
            } only %}
        </div>
    </div>

    <h2 class="text-xl font-semibold text-gray-900 mb-4">Avec une valeur pré-remplie</h2>
    <div class="bg-white rounded-2xl border border-gray-100 p-8 mb-8">
        <div class="flex flex-col md:flex-row md:items-stretch gap-4">
            {% include '_molecules/search-input/search-input.html.twig' with {
                id: 'demo-search-filled',
                placeholder: 'Rechercher une présentation…',
                value: 'rapport annuel'
            } only %}
        </div>
    </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">id</td><td class="px-6 py-3">string</td><td class="px-6 py-3">requis</td><td class="px-6 py-3">ID stable, exigé par turbo-permanent</td></tr>
                <tr><td class="px-6 py-3 font-mono">placeholder</td><td class="px-6 py-3">string</td><td class="px-6 py-3">'Rechercher…'</td><td class="px-6 py-3">Texte du placeholder</td></tr>
                <tr><td class="px-6 py-3 font-mono">value</td><td class="px-6 py-3">string</td><td class="px-6 py-3">''</td><td class="px-6 py-3">Valeur courante</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">'q'</td><td class="px-6 py-3">Nom du champ</td></tr>
                <tr><td class="px-6 py-3 font-mono">action</td><td class="px-6 py-3">string</td><td class="px-6 py-3">null</td><td class="px-6 py-3">Valeur de data-action (Stimulus)</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">conteneur par défaut</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">Code</h2>
    <div class="bg-gray-900 rounded-2xl p-6 overflow-x-auto">
        <pre class="text-sm text-gray-100"><code>{% verbatim %}{% include '_molecules/search-input/search-input.html.twig' with {
    id: 'slidia-search',
    placeholder: 'Rechercher une présentation…',
    value: search,
    action: 'input->shared--library-search#search'
} only %}{% endverbatim %}</code></pre>
    </div>

    <p class="text-sm text-gray-500 mt-4">Fichier : <code class="bg-gray-100 px-1 rounded">templates/_molecules/search-input/search-input.html.twig</code></p>
</div>
{% endblock %}