{% load i18n %}{% partialdef option %}<button type="button" class="flex w-full items-center gap-1.5 px-2 py-1.5 rounded-field cursor-pointer text-start hover:bg-base-200 [.highlighted>&]:bg-base-200" data-value="{{ option.value|stringformat:'s' }}" data-label="{{ option.label }}"{% if option.icon %} data-icon="{{ option.icon|force_escape }}"{% endif %}{% if option.label_html %} data-label-html="{{ option.label_html|force_escape }}"{% endif %}{% if option.selected_toggle_class %} data-selected-toggle-class="{{ option.selected_toggle_class }}"{% endif %}>
  {% if option.icon %}<span class="shrink-0">{{ option.icon }}</span>{% endif %}<span class="flex flex-col min-w-0">{% if option.label_html %}<span class="min-w-0">{{ option.label_html }}</span>{% else %}<span class="select-none">{{ option.label }}</span>{% endif %}{% if option.description %}<span class="text-xs text-current/50">{{ option.description }}</span>{% endif %}</span><span class="formwork-check ml-auto pl-3 shrink-0 opacity-0 group-aria-selected/option:opacity-100" aria-hidden="true"></span>
</button>{% endpartialdef %}{% partialdef option_list %}{% for option in options %}{% ifchanged option.group %}{% if option.group %}
<li class="menu-title" role="presentation" data-group x-show="matches($el)">{{ option.group }}</li>{% endif %}{% endifchanged %}
<li x-show="matches($el)" data-label="{{ option.label }}" role="option" class="group/option" :aria-selected="isSelected($el)">{% partial option %}</li>{% empty %}
<li>{% include "formwork/widgets/partials/no_results_alert.html" %}</li>{% endfor %}{% if truncated %}
<li>{% include "formwork/widgets/partials/more_results_hint.html" %}</li>{% endif %}{% endpartialdef %}{% translate "Select…" as default_placeholder %}{% firstof widget.trigger_placeholder default_placeholder as placeholder %}{% if widget.floating %}<div class="floating-label formwork-floating-select"><span{% if widget.floating_label_id %} id="{{ widget.floating_label_id }}"{% endif %}>{{ widget.attrs.placeholder }}</span>{% endif %}<details class="dropdown formwork-select{% if widget.floating %} min-w-0 grow{% endif %}"{% if widget.attrs.id %} id="{{ widget.attrs.id }}_wrapper"{% endif %} x-data="formworkSelect"{% if widget.disabled %} data-disabled="true"{% endif %} data-name="{{ widget.name }}" data-show-search="{{ widget.show_search|yesno:'true,false' }}" data-value="{{ widget.value|default:'' }}" data-label="{{ widget.selected_label }}" data-icon="{{ widget.selected_icon|force_escape }}" data-label-html="{{ widget.selected_label_html|force_escape }}" data-selected-toggle-class="{{ widget.selected_toggle_class }}" data-has-search-url="{{ widget.search_url|yesno:'true,false' }}" data-placeholder="{{ placeholder }}" @toggle="onToggle()" @keydown.arrow-down="onNav($event, 1)" @keydown.arrow-up="onNav($event, -1)" @keydown.enter="onEnter($event)" @keydown.escape="onEscape($event)" @focusout="onFocusOut($event)"{% if widget.search_url %} @htmx:before:swap="onSearchBeforeSwap($event)" @htmx:response:error="onSearchError()" @htmx:error="onSearchError()"{% endif %}>
  <summary{% if widget.attrs.id %} id="{{ widget.attrs.id }}"{% endif %} class="text-left{% if widget.attrs.class %} {{ widget.attrs.class }}{% endif %}{% if not widget.selected_label or not widget.value %} formwork-placeholder{% endif %}{% if widget.selected_toggle_class %} {{ widget.selected_toggle_class }}{% endif %}" :class="triggerClass"{% if widget.aria_labelledby %} aria-labelledby="{{ widget.aria_labelledby }}"{% endif %}{% if widget.aria_label %} aria-label="{{ widget.aria_label }}"{% endif %}{% if widget.aria_describedby %} aria-describedby="{{ widget.aria_describedby }}"{% endif %} aria-haspopup="listbox"{% if widget.disabled %} aria-disabled="true" tabindex="-1"{% endif %}{% if widget.aria_invalid %} aria-invalid="{{ widget.aria_invalid }}"{% endif %}{% if widget.aria_required %} aria-required="{{ widget.aria_required }}"{% endif %}{% for name, value in widget.trigger_attrs.items %}{% if value is not False %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %}>
    <span x-show="icon" x-html="icon"{% if not widget.selected_icon %} x-cloak{% endif %} class="shrink-0">{{ widget.selected_icon }}</span>
    <span class="formwork-autowidth-stack"><span><span x-show="!labelHtml" x-text="triggerText"{% if widget.selected_label_html %} x-cloak{% endif %}>{% if widget.selected_label %}{{ widget.selected_label }}{% else %}{{ placeholder }}{% endif %}</span><span x-show="labelHtml" x-html="labelHtml"{% if not widget.selected_label_html %} x-cloak{% endif %}>{{ widget.selected_label_html }}</span></span><span class="formwork-autowidth" aria-hidden="true">{% if not widget.search_url %}{% for option in widget.options %}<span>{{ option.label }}</span>{% endfor %}{% endif %}</span></span>
  </summary>
  <input type="hidden" name="{{ widget.name }}" value="{{ widget.value|default:'' }}" :value="value"{% if widget.attrs.id %} id="{{ widget.attrs.id }}_value"{% endif %}{% if widget.disabled %} disabled{% endif %}{% for name, value in widget.input_attrs.items %}{% if value is not False %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %}>
  <div x-ref="panel" popover="manual" class="dropdown-content bg-base-100 rounded-box shadow-lg border border-base-300 mt-1 max-h-72 overflow-y-auto text-sm">
    {% include "formwork/widgets/partials/dropdown_search.html" %}
    <ul x-ref="options"{% if widget.attrs.id %} id="{{ widget.attrs.id }}_listbox"{% endif %} role="listbox" class="p-1" x-show="!hasError" @click="onOptionClick($event)">{% with options=widget.options truncated=widget.truncated shown=widget.shown more_url=widget.more_url %}{% partial option_list %}{% endwith %}
    </ul>
    <div x-show="hasError" x-cloak role="alert" class="alert alert-error alert-soft m-1.5">{% translate "Search failed. Please try again." %}</div>
    <div x-show="noResults" x-cloak class="p-1">{% include "formwork/widgets/partials/no_results_alert.html" %}</div>
  </div>
</details>{% if widget.floating %}</div>{% endif %}