{% load i18n %}
{% comment %}
{# Enhanced UI for an autocomplete control. The enclosing element must carry
   data-daisyui-autocomplete and contain the native <select multiple>. Rendered
   hidden; daisyui_autocomplete.js reveals it and hides the native select.

   Front-end callers pass optional CSS/arrangement context; the admin widget
   omits it, so every value below has a safe default. #}
{% endcomment %}
<div class="daisyui-autocomplete__enhanced hidden" data-daisyui-autocomplete-enhanced>
  {% if options_position == "above" %}
    <ul
      class="daisyui-autocomplete__options menu menu-sm z-10 mb-1 hidden max-h-60 w-full flex-nowrap overflow-y-auto rounded-box bg-base-100 p-2 shadow{% if options_css %} {{ options_css }}{% endif %}"
      data-daisyui-autocomplete-options
    >
      {% for option in options %}
        <li data-value="{{ option.value }}" data-label="{{ option.label }}">
          <button type="button" data-daisyui-autocomplete-option>{{ option.label }}</button>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
  <div
    class="daisyui-autocomplete__fields{% if layout_css %} {{ layout_css }}{% endif %}"
    data-daisyui-autocomplete-fields
  >
    {% if arrangement == "input_tokens" %}
      <input
        type="text"
        class="{{ input_css|default:'input input-bordered w-full' }}"
        data-daisyui-autocomplete-input
        placeholder="{{ placeholder }}"
        autocomplete="off"
        spellcheck="false"
      />
      <div
        class="daisyui-autocomplete__tokens flex flex-wrap gap-1{% if tray_css %} {{ tray_css }}{% endif %}"
        data-daisyui-autocomplete-tokens
      ></div>
    {% else %}
      <div
        class="daisyui-autocomplete__tokens flex flex-wrap gap-1{% if tray_css %} {{ tray_css }}{% endif %}"
        data-daisyui-autocomplete-tokens
      ></div>
      <input
        type="text"
        class="{{ input_css|default:'input input-bordered w-full' }}"
        data-daisyui-autocomplete-input
        placeholder="{{ placeholder }}"
        autocomplete="off"
        spellcheck="false"
      />
    {% endif %}
  </div>
  {% if options_position != "above" %}
    <ul
      class="daisyui-autocomplete__options menu menu-sm z-10 mt-1 hidden max-h-60 w-full flex-nowrap overflow-y-auto rounded-box bg-base-100 p-2 shadow{% if options_css %} {{ options_css }}{% endif %}"
      data-daisyui-autocomplete-options
    >
      {% for option in options %}
        <li data-value="{{ option.value }}" data-label="{{ option.label }}">
          <button type="button" data-daisyui-autocomplete-option>{{ option.label }}</button>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
  <template data-daisyui-autocomplete-token>
    <span class="badge badge-primary gap-1{% if item_css %} {{ item_css }}{% endif %}">
      <span data-daisyui-autocomplete-token-label></span>
      <button
        type="button"
        class="cursor-pointer font-bold"
        data-daisyui-autocomplete-token-remove
        aria-label="{% translate 'Remove' %}"
      >&times;</button>
    </span>
  </template>
</div>