{% load i18n phoxtail_design_tags %}
{# Compact input with split HTMX targets: search only swaps results, preserving focus #}
{% with wid=widget_id|default:field.html_name %}
    <div id="{{ wid }}-compact-input" class="fw-msc-compact-input">
        {# Hidden inputs for form submission (cleared when inactive) #}
        <div id="{{ wid }}-selected-values" class="fw-hidden">
            {% if is_active != False %}
                {% for item in selected_items %}<input type="hidden" name="{{ field.html_name }}" value="{{ item.pk }}">{% endfor %}
            {% endif %}
        </div>
        {# Search bar - targets only results area to preserve focus during search #}
        <div class="fw-search-wrap">
            <div class="fw-search-icon-wrap">{% icon "search" class="fw-search-icon" %}</div>
            <input type="text"
                   name="{{ wid }}_search"
                   id="{{ wid }}-search-input"
                   value="{{ search_value|default:'' }}"
                   placeholder="{{ search_placeholder|default:_("Search...") }}"
                   autocomplete="off"
                   {% if is_active == False %}disabled{% endif %}
                   class="fw-search-input"
                   hx-get="{{ search_url }}"
                   hx-include="#{{ wid }}-selected-values{% if hx_include %}, {{ hx_include }}{% endif %}"
                   hx-target="#{{ wid }}-results"
                   hx-swap="innerHTML"
                   hx-trigger="input changed delay:300ms"
                   onfocus="document.getElementById('{{ wid }}-dropdown').classList.remove('fw-hidden')">
        </div>
        {# Results container - only this swaps during search #}
        <div id="{{ wid }}-results">
            {% include 'phoxtail_core/forms/widgets/htmx/multi_select_chips/results_content.html' with widget_id=wid show_dropdown=False %}
        </div>
        {# Selected chips - displayed below (hidden when inactive) #}
        {% if selected_items and is_active != False %}
            <div class="fw-msc-chips">
                {% for item in selected_items %}
                    <button type="button"
                            class="fw-msc-chip"
                            hx-get="{{ search_url }}"
                            hx-include="#{{ wid }}-selected-values{% if hx_include %}, {{ hx_include }}{% endif %}"
                            hx-vals='{"{{ wid }}_remove": "{{ item.pk }}"}'
                            hx-target="#{{ wid }}-compact-input"
                            hx-swap="outerHTML">
                        <span class="fw-msc-chip-icon">{% icon "close" %}</span>
                        {% if item_template %}
                            {% include item_template with item=item %}
                        {% else %}
                            <span class="fw-msc-chip-text">{{ item }}</span>
                        {% endif %}
                    </button>
                {% endfor %}
            </div>
        {% endif %}
    </div>

    <script>
    (function () {
        /* Close the dropdown on any click outside the whole widget (search
           bar AND dropdown) — the old onblur-with-timeout on the input only
           reacted to the input losing focus. Listeners are keyed on window
           and replaced on every HTMX re-render so swaps don't stack them.
           Capture phase on purpose: modal drawers stopPropagation() on inner
           clicks, which would otherwise never reach the document. */
        var clickKey = 'fwMscClick-{{ wid }}';
        var keyKey = 'fwMscKey-{{ wid }}';

        function dropdown() { return document.getElementById('{{ wid }}-dropdown'); }

        if (window[clickKey]) document.removeEventListener('click', window[clickKey], true);
        if (window[keyKey]) document.removeEventListener('keydown', window[keyKey]);
        window[clickKey] = function (e) {
            var root = document.getElementById('{{ wid }}-compact-input');
            var dd = dropdown();
            if (root && dd && !root.contains(e.target)) dd.classList.add('fw-hidden');
        };
        window[keyKey] = function (e) {
            var dd = dropdown();
            if (e.key === 'Escape' && dd) dd.classList.add('fw-hidden');
        };
        document.addEventListener('click', window[clickKey], true);
        document.addEventListener('keydown', window[keyKey]);
    })();
    </script>
{% endwith %}