{{--
    Champ de recherche libre de la barre de filtres, partagé par les quatre
    vues Notes/Documents (index perso, onglet Projet, onglet Élément).

    `wire:model` cible la propriété `search` du trait `HasTextSearch` : un
    composant Blade anonyme a une portée isolée (il ne voit pas les variables
    du parent), mais `wire:*` est résolu par Livewire au runtime contre le
    composant hôte, pas par Blade — d'où le nom en dur ici. Seule la valeur
    doit être passée explicitement, pour savoir s'il faut afficher la croix.
--}}
@props([
    'value' => '',
    'placeholder' => 'Titre ou contenu…',
])

<div class="flex items-baseline gap-2">
    <div class="mb-2.5 text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400">Recherche :</div>

    <div class="relative">
        <input
            type="text"
            wire:model.live.debounce.300ms="search"
            placeholder="{{ $placeholder }}"
            class="w-52 rounded-full border-gray-200 bg-white py-1.5 pr-8 pl-3 text-[13px] text-gray-700 placeholder:text-gray-400 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200"
        />

        @if (trim((string) $value) !== '')
            <button
                type="button"
                wire:click="clearSearch"
                title="Effacer la recherche"
                class="absolute top-1/2 right-2.5 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
            >
                ✕
            </button>
        @endif
    </div>
</div>