{#- 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-[13px] 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)"
           {% 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-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, or an inline table that scrolls sideways, the list
      takes its place and the dialog or row grows, since either 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"
       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="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-[12.5px] text-muted" x-show="more" x-cloak>{{ _('More records match. Type to narrow.') }}</p>
    {% endif %}
  </div>
</div>