{% 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.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 %}<div class="dropdown formwork-combobox"{% if widget.attrs.id %} id="{{ widget.attrs.id }}_wrapper"{% endif %} x-data="formworkComboBox" :class="dropdownClass" data-multiple="{{ widget.multiple|yesno:'true,false' }}" data-icons="{{ widget.icons_json }}" data-name="{{ widget.name }}" data-has-search-url="{{ widget.search_url|yesno:'true,false' }}" @click.outside="close()" @keydown.escape="onEscape($event)" @keydown.arrow-down="onNav($event, 1)" @keydown.arrow-up="onNav($event, -1)" @keydown.enter="onEnter($event)"{% if widget.search_url %} @htmx:before:swap="onSearchBeforeSwap($event)" @htmx:response:error="onSearchError()" @htmx:error="onSearchError()"{% endif %}>
  <div x-show="showDisplay" x-cloak @click="focusInput()" class="combobox-display absolute inset-0 flex items-center cursor-text z-1 overflow-hidden">{% if widget.multiple %}<template x-for="(part, i) in displayParts" :key="i"><span class="inline-flex items-center shrink-0"><span x-show="i">,&nbsp;</span><span x-show="part.icon" x-html="part.icon" class="shrink-0 mr-1"></span><span x-text="part.text"></span></span></template>{% else %}<span x-show="displayParts[0]?.icon" x-html="displayParts[0]?.icon" class="shrink-0 mr-1"></span><span x-text="displayParts[0]?.text"></span>{% endif %}</div>
  <input x-ref="input" type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %} class="combobox-input{% if widget.attrs.class %} {{ widget.attrs.class }}{% endif %}" :class="inputClass"{% if not widget.attrs.placeholder %} placeholder="{% translate 'Type to search...' %}"{% endif %} @focus="onFocus()" @input="onInput()" @blur="onBlur($event)" autocomplete="off" role="combobox" aria-autocomplete="list" :aria-expanded="open"{% if widget.attrs.id %} aria-controls="{{ widget.attrs.id }}_listbox"{% endif %} :aria-activedescendant="activeOption"{% if widget.search_url %} hx-get="{{ widget.search_url }}" hx-trigger="input changed delay:300ms, focus" hx-target="next ul" hx-swap="innerHTML" hx-sync="this:queue last"{% if widget.show_spinner %} hx-indicator="closest div"{% endif %} @htmx:config:request="onSearchConfig($event)"{% 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 %}>
  {% if widget.search_url and widget.show_spinner %}<span class="htmx-indicator formwork-search-spinner" aria-hidden="true"><span class="loading loading-spinner loading-xs"></span></span>{% endif %}
  <div x-ref="panel" popover="manual" x-show="open" x-cloak @mousedown.prevent class="dropdown-content bg-base-100 rounded-box shadow-lg border border-base-300 mt-1 max-h-72 overflow-y-auto text-sm">
    <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)">{% if widget.options %}{% with options=widget.options truncated=widget.truncated shown=widget.shown more_url=widget.more_url %}{% partial option_list %}{% endwith %}{% endif %}
    </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>
  <span class="formwork-autowidth" aria-hidden="true">{% if not widget.search_url %}{% for option in widget.options %}<span>{{ option.label }}</span>{% endfor %}{% endif %}</span>
</div>