{#
 # ============================================================================
 # MOLECULE: SEARCH INPUT
 # ============================================================================
 #
 # Champ de recherche pill des bibliothèques d'outils (Moodia, Scormia, Slidia).
 # Sans comportement propre : le pilotage passe par `action`, qui pointe vers un
 # contrôleur Stimulus (voir shared--library-search).
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig (search)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type   | Défaut         | Description                        |
 # |-------------|--------|----------------|------------------------------------|
 # | id          | string | (requis)       | ID stable, exigé par turbo-permanent|
 # | placeholder | string | 'Rechercher…'  | Texte du placeholder               |
 # | value       | string | ''             | Valeur courante (rendue serveur)   |
 # | name        | string | 'q'            | Nom du champ                       |
 # | action      | string | null           | Valeur de data-action (Stimulus)   |
 # | class       | string | 'flex-1 md:max-w-md md:ml-auto' | Classes additionnelles du conteneur (`relative` est toujours ajouté) |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # {% 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 %}
 #
 # ============================================================================
 #}

{% set placeholder = placeholder ?? 'Rechercher…' %}
{% set value = value ?? '' %}
{% set name = name ?? 'q' %}
{% set action = action ?? null %}
{% set class = class ?? 'flex-1 md:max-w-md md:ml-auto' %}

{#- `data-tour-step` : ancre générique des tutoriels interactifs, posée sur la molécule
    partagée pour qu'un tutoriel désigne « la recherche » sans rien savoir de l'outil.
    Inerte : aucun style, aucun comportement. Voir docs/tours.md. -#}
<div class="relative {{ class }}" data-tour-step="outil-recherche">
    <span class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
        {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'sm', color: 'current' } only %}
    </span>
    {# data-turbo-permanent : le champ garde le focus/valeur pendant la frappe malgré les visites Turbo. #}
    <input type="search"
           id="{{ id }}"
           name="{{ name }}"
           value="{{ value }}"
           placeholder="{{ placeholder }}"
           autocomplete="off"
           data-turbo-permanent
           {% if action %}data-action="{{ action }}"{% endif %}
           class="w-full h-12 md:h-full pl-11 pr-4 rounded-full bg-white border border-black/[0.08] shadow-[0_2px_8px_rgba(0,0,0,0.04)] text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:border-gray-300 focus:ring-4 focus:ring-gray-100 transition">
</div>