{% embed '_molecules/modal/modal.html.twig' with {
    id: 'modal-associate-user',
    title: 'Associer un utilisateur',
    icon: 'user-add',
    iconColor: 'primary',
    size: 'lg',
    cancelLabel: 'Fermer'
} %}
    {% block body %}
        <div
            data-controller="user-associate"
            data-user-associate-search-url-value="{{ path('admin_company_search_users', {uuid: company.uuid}) }}"
            data-user-associate-associate-url-value="{{ path('admin_company_associate_user', {uuid: company.uuid, userUuid: '__USER_UUID__'}) }}"
            data-user-associate-csrf-token-value="{{ csrf_token('associate-user-' ~ company.uuid) }}"
        >
            <p class="text-sm text-gray-600 mb-1">
                Recherchez un utilisateur existant pour l'associer à <strong class="text-gray-900">{{ company.name }}</strong>.
            </p>
            <p class="text-xs text-gray-400 mb-4">Seuls les utilisateurs sans entreprise sont affichés.</p>

            {# Champ de recherche #}
            <div class="relative mb-4">
                <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'sm', color: 'gray' } only %}
                </div>
                <input
                    type="search"
                    placeholder="Rechercher par nom ou email…"
                    class="w-full pl-9 pr-4 py-2.5 text-sm border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors"
                    data-user-associate-target="searchInput"
                    data-action="input->user-associate#search"
                    autocomplete="off"
                >
            </div>

            {# Zone de résultats #}
            <div
                data-user-associate-target="results"
                class="min-h-[120px] max-h-80 overflow-y-auto rounded-xl border border-gray-100"
            >
                <div class="flex flex-col items-center justify-center py-10 px-4">
                    <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-4">
                        <svg class="w-7 h-7 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                            <circle cx="9" cy="7" r="4"/>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                    </div>
                    <p class="text-sm font-medium text-gray-900">Rechercher un utilisateur</p>
                    <p class="text-xs text-gray-500 mt-1">Commencez à taper pour rechercher</p>
                </div>
            </div>
        </div>
    {% endblock %}
{% endembed %}