{% load i18n phoxtail_design_tags %}
{# Single select: MD3-field trigger opens a panel with search bar + items inside. #}
{# The floating label and outline live in the parent template (outside this   #}
{# swap target); the empty trigger shows nothing while closed — the resting    #}
{# label communicates the field. trigger_placeholder, when given, is only      #}
{# revealed while the panel is open (CSS), replacing the old hardcoded         #}
{# "Select remote" default.                                                    #}
{% with wid=widget_id|default:field.html_name %}
    <div id="{{ wid }}-input" class="fw-sss-input">
        {# Hidden input for form submission — its presence also drives the label float (CSS :has) #}
        <div id="{{ wid }}-selected-value" class="fw-hidden">
            {% if selected_item and is_active != False %}
                <input type="hidden"
                       name="{{ field.html_name }}"
                       value="{{ selected_item.pk }}">
            {% endif %}
        </div>

        {# Field-shaped trigger — div so the clear button can nest inside without invalid HTML #}
        <div class="fw-sss-trigger fw-md3-control"
             id="{{ wid }}-trigger"
             role="button"
             tabindex="{% if is_active == False %}-1{% else %}0{% endif %}"
             aria-expanded="false"
             aria-controls="{{ wid }}-panel"
             aria-haspopup="listbox">
            <span class="fw-sss-trigger-label">
                {% if selected_item and is_active != False %}
                    {% if item_template %}
                        {% include item_template with item=selected_item %}
                    {% else %}
                        {{ selected_item }}
                    {% endif %}
                {% elif trigger_placeholder %}
                    <span class="fw-sss-placeholder">{{ trigger_placeholder }}</span>
                {% endif %}
            </span>
            {% if selected_item and is_active != False %}
                <button type="button"
                        class="fw-sss-trigger-clear"
                        hx-get="{{ search_url }}"
                        hx-include="#{{ wid }}-selected-value{% if hx_include %}, {{ hx_include }}{% endif %}"
                        hx-vals='{"{{ wid }}_clear": "1"}'
                        hx-target="#{{ wid }}-container"
                        hx-swap="innerHTML"
                        aria-label="{% trans "Clear selection" %}">
                    {% icon "close" %}
                </button>
            {% else %}
                {% icon "chevron_down" class="fw-sss-chevron" %}
            {% endif %}
        </div>

        {# Dropdown panel — hidden by default, toggled by trigger #}
        <div id="{{ wid }}-panel" class="fw-sss-panel fw-hidden" role="listbox">
            <div class="fw-sss-panel-search">
                {% icon "search" class="fw-sss-panel-search-icon" %}
                <input type="text"
                       id="{{ wid }}-search-input"
                       name="{{ wid }}_search"
                       value="{{ search_value|default:'' }}"
                       placeholder="{{ search_placeholder|default:_("Search…") }}"
                       autocomplete="off"
                       {% if is_active == False %}disabled{% endif %}
                       class="fw-sss-panel-input"
                       hx-get="{{ search_url }}"
                       hx-include="#{{ wid }}-selected-value{% if hx_include %}, {{ hx_include }}{% endif %}"
                       hx-target="#{{ wid }}-results"
                       hx-swap="innerHTML"
                       hx-trigger="input changed delay:300ms">
            </div>
            <div id="{{ wid }}-results" class="fw-sss-results">
                {% include 'phoxtail_core/forms/widgets/htmx/single_select_search/results_content.html' with widget_id=wid %}
            </div>
        </div>
    </div>

    <script>
    (function () {
        var trigger   = document.getElementById('{{ wid }}-trigger');
        var panel     = document.getElementById('{{ wid }}-panel');
        var searchIn  = document.getElementById('{{ wid }}-search-input');
        var container = document.getElementById('{{ wid }}-input');
        if (!trigger || !panel) return;

        function open() {
            panel.classList.remove('fw-hidden');
            trigger.setAttribute('aria-expanded', 'true');
            if (searchIn) setTimeout(function () { searchIn.focus(); }, 0);
        }

        function close() {
            panel.classList.add('fw-hidden');
            trigger.setAttribute('aria-expanded', 'false');
        }

        trigger.addEventListener('click', function (e) {
            /* Clear button fires its own HTMX action — don't toggle panel */
            if (e.target.closest('.fw-sss-trigger-clear')) return;
            trigger.getAttribute('aria-expanded') === 'true' ? close() : open();
        });

        trigger.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                trigger.getAttribute('aria-expanded') === 'true' ? close() : open();
            }
        });

        /* Document-level listeners are keyed on window and replaced on every
           HTMX re-render — otherwise each swap would stack another listener
           holding the previous DOM. Closes on any click outside the widget
           (trigger AND panel) and on Escape. Capture phase on purpose:
           modal drawers stopPropagation() on inner clicks, which would
           otherwise keep bubbling clicks from ever reaching the document. */
        var clickKey = 'fwSssClick-{{ wid }}';
        var keyKey = 'fwSssKey-{{ wid }}';
        if (window[clickKey]) document.removeEventListener('click', window[clickKey], true);
        if (window[keyKey]) document.removeEventListener('keydown', window[keyKey]);
        window[clickKey] = function (e) {
            if (container && !container.contains(e.target)) close();
        };
        window[keyKey] = function (e) {
            if (e.key === 'Escape') close();
        };
        document.addEventListener('click', window[clickKey], true);
        document.addEventListener('keydown', window[keyKey]);
    })();
    </script>
{% endwith %}