{% load i18n %}
{% comment %}
Single Select Search Widget (MD3 outlined field + menu panel)
=============================================================
A searchable single-select. The trigger is an MD3 outlined field whose label
rests inside and floats into the outline notch when the panel opens or a
selection exists. The label/outline live HERE, outside the HTMX swap target,
because the search endpoint re-renders input.html without the label/show_label
context; float state is driven purely by CSS :has() (a hidden input exists
only while something is selected), so it survives swaps.

Required context:
    - field: The form field (SingleSelectSearchField or ModelChoiceField)
    - search_url: URL for HTMX search endpoint

Optional context:
    - selected_item: Model instance or None (auto-derived from field if not provided)
    - available_items: Queryset of available items (auto-derived from field if not provided)
    - widget_id: Unique identifier (default: field.html_name)
    - hx_include: Selector for additional form fields to include in requests
    - show_label/show_help_text: Whether to show label/help (default: True)
    - label: Custom label text; pass "" to render no label at all
    - item_template: Path to template for rich dropdown item rendering (default: uses __str__)
    - is_active: Whether the widget is interactive (default: active; pass False to deactivate)
    - search_placeholder: Placeholder text for search input
    - search_value: Current search query value
    - trigger_placeholder: Optional hint shown in the trigger while the panel
      is open and nothing is selected (the resting label covers the closed state)
{% endcomment %}
{# Derive widget_id and item data from field if not provided #}
{% with widget_id=widget_id|default:field.html_name selected_item=selected_item|default:field.selected_item available_items=available_items|default:field.available_items %}
    <div id="{{ widget_id }}-widget" class="fw-sss-widget fw-md3{% if field.errors %} fw-md3--error{% endif %}">
        <div class="fw-md3-outlined fw-sss-outlined">
            {# HTMX swap target — trigger, hidden value, and panel only #}
            <div id="{{ widget_id }}-container"
                 class="fw-widget-container{% if is_active == False or field.field.disabled %} fw-widget-container--inactive{% endif %}">
                {% include 'phoxtail_core/forms/widgets/htmx/single_select_search/input.html' %}
            </div>
            {% if show_label != False and label != "" %}
                <label class="fw-md3-label">
                    {{ label|default:field.label }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}
                </label>
            {% endif %}
            <fieldset class="fw-md3-outline" aria-hidden="true">
                <legend class="fw-md3-notch{% if show_label == False or label == "" %} fw-md3-notch--empty{% endif %}">
                    {% if show_label != False and label != "" %}<span>{{ label|default:field.label }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}</span>{% endif %}
                </legend>
            </fieldset>
        </div>
        {% if field.errors %}
            <div class="fw-md3-supporting" id="{{ widget_id }}-errors">
                {% for error in field.errors %}<span>{{ error }}</span>{% endfor %}
            </div>
            <script>
            (function () {
                /* Errors live outside the HTMX swap target (the label/outline
                   anatomy requires it), so clear them by hand once the user
                   changes the selection — the container re-render used to do
                   this for free when errors lived inside it. */
                var container = document.getElementById('{{ widget_id }}-container');
                if (!container) return;
                container.addEventListener('htmx:afterSwap', function (e) {
                    if (e.detail.target !== container) return;
                    var widget = document.getElementById('{{ widget_id }}-widget');
                    if (widget) widget.classList.remove('fw-md3--error');
                    var errors = document.getElementById('{{ widget_id }}-errors');
                    if (errors) errors.remove();
                });
            })();
            </script>
        {% elif show_help_text != False and help_text|default:field.help_text %}
            <div class="fw-md3-supporting">{{ help_text|default:field.help_text }}</div>
        {% endif %}
    </div>
{% endwith %}