{#
  Modale "Operativo come": ricerca (AJAX) + selezione bersaglio. Inclusa dal layout solo quando
  `canImpersona`. Overlay hand-rolled (nessuna dipendenza dal JS di Bootstrap), coerente col drawer.
  I risultati arrivano dal fragment `/area-riservata/impersona/cerca` e sono pulsanti che valorizzano
  il form (CSRF qui) e lo inviano in POST a `/area-riservata/impersona`.
  Tab Clienti/Agenti solo per l'operatore multi-tipo (admin): `impersonaMultiTipo`.
#}
<div class="ar-modal" data-ar-impersona-modal hidden>
    <div class="ar-modal-backdrop" data-ar-impersona-close></div>
    <div class="ar-modal-dialog bg-white rounded-4 border border-2 border-light shadow d-flex flex-column overflow-hidden"
        role="dialog" aria-modal="true" aria-label="{{ pgMessage('areariservata.impersona.titolo') }}">

        <div class="d-flex align-items-center gap-2 p-3 text-bg-dark">
            <i class="fa fa-user-secret" aria-hidden="true"></i>
            <span class="fw-semibold flex-grow-1">{{ pgMessage('areariservata.impersona.titolo') }}</span>
            <button type="button" class="btn btn-sm btn-outline-light py-0 px-2" data-ar-impersona-close
                aria-label="{{ pgMessage('areariservata.impersona.esci') }}">
                <i class="fa fa-times" aria-hidden="true"></i>
            </button>
        </div>

        <form data-ar-imp-form action="{{ href('/area-riservata/impersona') }}" method="post"
            class="d-flex flex-column gap-3 p-3 ar-min0">
            <input type="hidden" name="{{ request.getAttribute('_csrf').parameterName }}"
                value="{{ request.getAttribute('_csrf').token }}">
            <input type="hidden" name="username" data-ar-imp-username>

            {% if impersonaMultiTipo %}
            <div class="btn-group w-100" role="group">
                <button type="button" class="btn btn-sm btn-outline-secondary active" data-ar-imp-tab="clienti">{{ pgMessage('areariservata.impersona.tabClienti') }}</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" data-ar-imp-tab="agenti">{{ pgMessage('areariservata.impersona.tabAgenti') }}</button>
            </div>
            {% endif %}

            <input type="search" class="form-control" data-ar-imp-search autocomplete="off"
                placeholder="{{ pgMessage('areariservata.impersona.cerca') }}">

            <div class="ar-impersona-results" data-ar-imp-results></div>
        </form>
    </div>
</div>

<script>
    (function () {
        var modal = document.querySelector('[data-ar-impersona-modal]');
        if (!modal) { return; }
        var form = modal.querySelector('[data-ar-imp-form]');
        var results = modal.querySelector('[data-ar-imp-results]');
        var search = modal.querySelector('[data-ar-imp-search]');
        var usernameInput = modal.querySelector('[data-ar-imp-username]');
        var base = '{{ href('/area-riservata/impersona/cerca') }}';
        var tipo = 'clienti';
        var timer;

        function load() {
            results.innerHTML = '<div class="text-secondary small p-3 text-center">…</div>';
            var url = base + '?tipo=' + encodeURIComponent(tipo) + '&q=' + encodeURIComponent(search.value || '');
            fetch(url, { headers: { 'X-Requested-With': 'fetch' } })
                .then(function (r) { return r.text(); })
                .then(function (html) { results.innerHTML = html; })
                .catch(function () { results.innerHTML = ''; });
        }

        function open() {
            modal.hidden = false;
            document.body.classList.add('ar-modal-open');
            search.value = '';
            load();
            setTimeout(function () { search.focus(); }, 50);
        }
        function close() {
            modal.hidden = true;
            document.body.classList.remove('ar-modal-open');
        }

        // Delega sui trigger di apertura: stanno sia nell'avatar della navbar (sopra questo script) sia
        // nella barra contestuale dell'area riservata (più in basso nel DOM) → querySelectorAll qui li
        // mancherebbe. La delega su document li intercetta tutti, ovunque siano.
        document.addEventListener('click', function (e) {
            if (e.target.closest('[data-ar-impersona-open]')) { e.preventDefault(); open(); }
        });
        modal.querySelectorAll('[data-ar-impersona-close]').forEach(function (b) { b.addEventListener('click', close); });

        search.addEventListener('input', function () { clearTimeout(timer); timer = setTimeout(load, 250); });

        modal.querySelectorAll('[data-ar-imp-tab]').forEach(function (b) {
            b.addEventListener('click', function () {
                modal.querySelectorAll('[data-ar-imp-tab]').forEach(function (x) { x.classList.remove('active'); });
                b.classList.add('active');
                tipo = b.getAttribute('data-ar-imp-tab');
                load();
            });
        });

        results.addEventListener('click', function (e) {
            var pick = e.target.closest('[data-ar-imp-pick]');
            if (!pick) { return; }
            usernameInput.value = pick.getAttribute('data-ar-imp-pick');
            form.submit();
        });

        document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !modal.hidden) { close(); } });
    })();
</script>