{% with id=widget.attrs.id %}{% if widget.search_url %}<details class="dropdown multiselect"{% if id %} id="{{ id }}_multiselect"{% endif %} x-data="{
  _v: 0,
  search: '',
  selected: new Map({{ widget.initial_selected_json|safe }}),
  toggle(value, label, icon) {
    if (this.selected.has(value)) this.selected.delete(value);
    else this.selected.set(value, [label, icon || '']);
    this._v++;
    this.$nextTick(() => this.$root.dispatchEvent(new Event('change', {bubbles: true})));
  },
  get noResults() {
    if (!this.search) return false;
    return !this.$refs.options.querySelector('.select-none');
  },
  get displayText() {
    this._v;
    if (!this.selected.size) return '';
    if (this.selected.size > 3) return this.selected.size + ' selected';
    return [...this.selected.values()].map(([lbl, ic]) =>
      ic ? ic + '\u00a0' + lbl : lbl
    ).join(', ');
  }
}" @toggle="if ($el.open) $nextTick(() => $refs.search.focus())">
  <summary{% if id %} id="{{ id }}"{% endif %} class="text-left{% if widget.attrs.class %} {{ widget.attrs.class }}{% endif %}" :class="!displayText && 'formwork-placeholder'"{% if widget.aria_invalid %} aria-invalid="{{ widget.aria_invalid }}"{% endif %}>
    <span x-text="displayText || 'Select\u2026'">Select&#x2026;</span>
  </summary>
  <div class="dropdown-content bg-base-100 rounded-box shadow-lg border border-base-300 mt-1 text-sm">
    <template x-for="[val] in [...selected]" :key="val">
      <input type="hidden" name="{{ widget.name }}" :value="val">
    </template>
    <div class="p-1.5 border-b border-base-300 flex items-center gap-1">
      <input x-ref="search" x-model="search" type="text" class="grow bg-transparent outline-none px-2 py-1" placeholder="Search&#x2026;" @click.stop hx-get="{{ widget.search_url }}" hx-trigger="input changed delay:300ms, focus" hx-target="#{{ id }}_options" hx-swap="innerHTML" hx-params="none" hx-on::config-request="event.detail.parameters.q = this.value; event.detail.parameters.type = 'multiselect'; event.detail.parameters.name = '{{ widget.name }}'" hx-indicator="#{{ id }}_spinner">
      <span{% if id %} id="{{ id }}_spinner"{% endif %} class="htmx-indicator"><span class="loading loading-spinner loading-xs"></span></span>
    </div>
    <ul x-ref="options" id="{{ id }}_options" @change="_v++" class="max-h-60 overflow-y-auto p-1">
    </ul>
  </div>
</details>{% else %}<details class="dropdown multiselect"{% if id %} id="{{ id }}_multiselect"{% endif %} x-data="{
  _v: 0,
  search: '',
  get noResults() {
    if (!this.search) return false;
    const q = this.search.toLowerCase();
    return ![...this.$refs.options.querySelectorAll('.select-none')].some(
      s => s.textContent.trim().toLowerCase().includes(q)
    );
  },
  get displayText() {
    this._v;
    const checked = [...this.$refs.options.querySelectorAll('input:checked')];
    if (!checked.length) return '';
    if (checked.length > 3) return checked.length + ' selected';
    return checked.map(el => {
      const lbl = el.parentElement;
      const ic = lbl.querySelector('.shrink-0:not(.formwork-check)');
      const text = lbl.querySelector('.select-none').textContent.trim();
      return ic ? ic.textContent.trim() + '\u00a0' + text : text;
    }).join(', ');
  }
}"{% if widget.show_search %} @toggle="if ($el.open) $nextTick(() => $refs.search.focus())"{% endif %}>
  <summary{% if id %} id="{{ id }}"{% endif %} class="text-left{% if widget.attrs.class %} {{ widget.attrs.class }}{% endif %}" :class="!displayText && 'formwork-placeholder'"{% if widget.aria_invalid %} aria-invalid="{{ widget.aria_invalid }}"{% endif %}>
    <span x-text="displayText || 'Select\u2026'">Select&#x2026;</span>
  </summary>
  <div class="dropdown-content bg-base-100 rounded-box shadow-lg border border-base-300 mt-1 text-sm">
    {% if widget.show_search %}<div class="p-1.5 border-b border-base-300">
      <input x-ref="search" x-model="search" type="text" class="w-full bg-transparent outline-none px-2 py-1" placeholder="Search&#x2026;" @click.stop>
    </div>{% endif %}
    <ul x-ref="options" @change="_v++" class="max-h-60 overflow-y-auto p-1">
      {% for group, options, index in widget.optgroups %}{% if group %}<li class="menu-title">{{ group }}</li>{% endif %}{% for option in options %}
      <li{% if widget.show_search %} x-show="!search || '{{ option.label|escapejs }}'.toLowerCase().includes(search.toLowerCase())"{% endif %}><label class="flex items-center gap-2 px-3 py-1.5 rounded-btn cursor-pointer hover:bg-base-200"{% if option.attrs.id %} for="{{ option.attrs.id }}"{% endif %}>
        <input type="checkbox" name="{{ widget.name }}" value="{{ option.value|stringformat:'s' }}"{% if option.attrs.id %} id="{{ option.attrs.id }}"{% endif %} class="multiselect hidden"{% if option.selected %} checked{% endif %}>
        <span class="formwork-check shrink-0 opacity-0" aria-hidden="true">&#x2713;</span>
        {% if option.icon %}<span class="shrink-0">{{ option.icon|safe }}</span>{% endif %}<span class="select-none">{{ option.label }}</span>
      </label></li>{% endfor %}{% endfor %}
    </ul>
    {% if widget.show_search %}<p x-show="noResults" x-cloak class="px-3 py-2 text-base-content/50">No results</p>{% endif %}
  </div>
</details>{% endif %}{% endwith %}