{% 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: A SingleSelectSearchField (its hidden widget carries the pick)
      (disabled=True on the form field: the filled look of a disabled field, its
      pick shown if it has one, nothing to open or clear)
    - search_url: URL for HTMX search endpoint

Optional context:
    - 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__)
    - 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)
    - variant/size: outlined + large (default, for forms) or variant="filled"
      size="small" (a pill, for toolbars, as the search field's): no outline,
      the label kept for assistive technology only, trigger_placeholder shown
      whenever nothing is picked
{% endcomment %}
{% with widget_id=field.html_name selected_item=field.selected_item available_items=field.available_items %}
    <div id="{{ widget_id }}-widget" data-single-select-search class="phx-single-select-search phx-single-select-search--{{ variant|default:"outlined" }} phx-single-select-search--{{ size|default:"large" }} phx-field{% if field.errors %} phx-field--error{% endif %}">
        <div class="phx-field__box phx-single-select-search__box">
            {# HTMX swap target — trigger, hidden value, and panel only #}
            <div id="{{ widget_id }}-container"
                 class="phx-single-select-search__container{% if field.field.disabled %} phx-single-select-search__container--inactive{% endif %}">
                {% include 'phoxtail_core/forms/fields/single_select_search/input.html' %}
            </div>
            {% if show_label != False and label != "" %}
                <label class="phx-field__label"{% if field.auto_id %} id="{{ field.auto_id }}_label"{% endif %}>
                    {{ label|default:field.label }}{% if show_required != False and required|default:field.field.required %}&nbsp;*{% endif %}
                </label>
            {% endif %}
            <fieldset class="phx-field__outline" aria-hidden="true">
                <legend class="phx-field__notch{% if show_label == False or label == "" %} phx-field__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 supporting == "errors" %}
            <div class="phx-field__supporting"{% if field.auto_id %} id="{{ field.auto_id }}_error"{% endif %}>
                {% for error in field.errors %}<span>{{ error }}</span>{% endfor %}
            </div>
        {% elif supporting == "help" %}
            <div class="phx-field__supporting"{% if field.auto_id %} id="{{ field.auto_id }}_helptext"{% endif %}>{{ help_text|default:field.help_text }}</div>
        {% endif %}
    </div>
{% endwith %}