{#- A picker: one box to type in. The records it holds sit in it as chips, in
    the order they were chosen, and a list opens under it as soon as it is
    clicked or typed in. With `picker_options` the whole list is in the page
    and narrows as you type; without, it is searched on the server, as a
    link to over a hundred records is. `picker_multiple` holds several, and
    `picker_ordered` shows them as numbered rows to put in order, with the
    box under them for adding one. `picker_hint` is the box's placeholder,
    and `picker_search` the one a link to one record shows while searching. -#}
{% import "adminsite/_icons.html" as icons %}
{%- set list_id = "options-" ~ (row.id_prefix ~ row.path)|replace(".", "-") -%}
{%- set ordered = picker_ordered|default(false) -%}
{%- set local = picker_options is not none -%}
{#- Single quotes, because the chosen records are written in as JSON and
    their names hold double quotes. -#}
<div class="relative" @htmx:after-swap="refresh()"
     x-data='recordPicker({multiple: {{ "true" if picker_multiple else "false" }}, ordered: {{ "true" if ordered else "false" }}, local: {{ "true" if local else "false" }}, list: {{ list_id|tojson }}, hint: {{ picker_hint|default("")|tojson }}, search: {{ picker_search|default("")|tojson }}, picked: {{ row.picked_pairs|tojson }}})'>
  <template x-for="item in picked" :key="item.value">
    <input type="hidden" name="{{ row.path }}" :value="item.value">
  </template>

  {% if ordered %}
    {#- In the order the link keeps them: numbered, each moved up or down by
        its buttons, or dragged onto another's place. -#}
    <ol class="mb-1.5 flex flex-col gap-1" x-show="picked.length" x-cloak>
      <template x-for="(item, index) in picked" :key="item.value">
        <li class="flex cursor-grab items-center gap-2 rounded-field border border-base-300 bg-base-100 py-1 ps-2 pe-1"
            draggable="true" :class="{ 'opacity-50': dragged === index }"
            @dragstart="dragged = index" @dragend="dragged = null"
            @dragover.prevent @drop.prevent="place(dragged, index); dragged = null">
          <span class="w-5 shrink-0 text-end tabular-nums text-muted" x-text="index + 1"></span>
          <span class="grow" x-text="item.label"></span>
          <button type="button" class="btn btn-ghost btn-xs btn-square" @click="move(index, -1)"
                  :disabled="index === 0"
                  :aria-label="MOVE_UP.replace('{name}', item.label)">{{ icons.icon("arrow-up", 14) }}</button>
          <button type="button" class="btn btn-ghost btn-xs btn-square" @click="move(index, 1)"
                  :disabled="index === picked.length - 1"
                  :aria-label="MOVE_DOWN.replace('{name}', item.label)">{{ icons.icon("arrow-down", 14) }}</button>
          <button type="button" class="btn btn-ghost btn-xs btn-square" @click="remove(item.value)"
                  :aria-label="REMOVE_CHOSEN.replace('{name}', item.label)">{{ icons.icon("x", 14) }}</button>
        </li>
      </template>
    </ol>
  {% endif %}

  {#- A press anywhere in the box goes to the text in it, as in any input. -#}
  <div class="input h-auto min-h-10 w-full cursor-text flex-wrap gap-1.5 py-1 {% if row.error %}input-error{% endif %}"
       @mousedown="press($event)">
    {% if ordered %}
      <span class="text-muted">{{ icons.icon("plus", 16) }}</span>
    {% elif picker_multiple %}
      <template x-for="item in picked" :key="item.value">
        <span class="badge badge-soft badge-primary h-7 gap-0.5 ps-2 pe-0.5 text-label font-medium">
          <span x-text="item.label"></span>
          <button type="button" class="inline-flex size-6 items-center justify-center rounded hover:bg-primary/15"
                  @mousedown.prevent.stop @click="remove(item.value)"
                  :aria-label="REMOVE_CHOSEN.replace('{name}', item.label)">{{ icons.icon("x", 12) }}</button>
        </span>
      </template>
    {% endif %}
    <input type="text" id="{{ row.input_id }}" x-ref="search" role="combobox"
           class="h-7 min-w-24 flex-1" autocomplete="off" spellcheck="false"
           aria-autocomplete="list" aria-controls="{{ list_id }}"
           :aria-expanded="open.toString()" :aria-activedescendant="activeId || null"
           x-model="query" :placeholder="placeholder"
           @focus="enter()" @click="enter()" @blur="close()" @input="typed()" @keydown="key($event)"
           {#- The search says how it swaps and keeps to itself, so a form it
               sits in, as the filters drawer's, lends it nothing: not its
               swap, its address or the queue of its own requests. The
               newest search wins. -#}
           {% if not local %}
             name="q"
             hx-get="{{ row.lookup_url or urls.lookup(view, row.lookup_path or row.path) }}"
             hx-target="#{{ list_id }}" hx-swap="innerHTML" hx-push-url="false"
             hx-sync="this:replace"
             hx-trigger="input changed delay:250ms, picker-search"
           {% endif %}
           {{ field_attrs|default('') }}>
    {% if not picker_multiple %}
      {% if not row.required %}
        <button type="button" class="btn btn-ghost btn-xs btn-square" x-show="picked.length" x-cloak
                @mousedown.prevent.stop @click="clear()"
                aria-label="{{ _('Clear {name}', name=row.label) }}">{{ icons.icon("x", 14) }}</button>
      {% endif %}
      <span class="text-muted">{{ icons.icon("chevron-down", 16) }}</span>
    {% endif %}
  </div>

  {#- Inside a dialog, an inline table that scrolls sideways or the filters
      drawer, the list takes its place and the dialog, row or drawer grows,
      since each would cut off anything floating past its edge. A press on
      it keeps the typing in the box. -#}
  <div class="absolute z-30 mt-1 w-full overflow-hidden rounded-box border border-base-300 bg-base-100 shadow-lg in-[.modal-box]:static in-[table]:static in-[#filters]:static"
       x-show="open" x-cloak @mousedown.prevent>
    <ul id="{{ list_id }}" x-ref="list" role="listbox" aria-label="{{ row.label }}"
        {% if picker_multiple %}aria-multiselectable="true"{% endif %}
        class="relative max-h-64 overflow-auto p-1">
      {% if local %}
        {% for choice in picker_options %}
          {% include "adminsite/widgets/_option.html" %}
        {% endfor %}
      {% endif %}
    </ul>
    <p class="px-3.5 py-2.5 text-muted" x-show="empty" x-cloak>{{ _('Nothing found.') }}</p>
    {% if not local %}
      <p class="border-t border-base-300 px-3.5 py-2 text-note text-muted" x-show="more" x-cloak>{{ _('More records match. Type to narrow.') }}</p>
    {% endif %}
  </div>
</div>