{% load i18n %}
{% comment %}
Composite widget rendered by :class:`conjunto.forms.widgets.AutocompleteSelect`:

* a hidden ``<input name="…">`` that carries the picked PK into
  ``form.cleaned_data`` (so it stays a normal ModelChoiceField).
* a visible ``<input type="search" name="q">`` that debounces an ``hx-get``
  against the autocomplete endpoint — htmx sends its value as ``?q=…``.
* a Tabler/Bootstrap ``.dropdown-menu`` overlay that the endpoint's
  ``<button class="dropdown-item" data-value data-label>`` rows are swapped
  into. The menu is position-absolute so it overlays (no layout space) and
  only shows while ``open`` (typing), never as a fixed list.

Keyboard: ↑/↓ move the highlight, Enter / Tab pick the highlighted row (Tab
then moves focus on), Esc closes. The first row is pre-highlighted after each
search so Enter takes the top match. Open/close + selection are pure Alpine
(no Bootstrap JS / Popper); result clicks and the keyboard handlers both go
through ``choose()`` so the two paths stay in sync. Result rows are
htmx-swapped, so the component reads them from the DOM on demand rather than
holding a list.
{% endcomment %}
<div class="position-relative"
     x-data="{
        open: false,
        active: -1,
        rows() { return [...$el.querySelectorAll('.dropdown-item[data-value]')]; },
        highlight() {
            const rows = this.rows();
            rows.forEach((el, i) => el.classList.toggle('active', i === this.active));
            if (rows[this.active]) rows[this.active].scrollIntoView({block: 'nearest'});
        },
        move(step) {
            const n = this.rows().length;
            if (!n) return;
            this.open = true;
            this.active = (this.active + step + n) % n;
            this.highlight();
        },
        onResults() { this.active = this.rows().length ? 0 : -1; this.highlight(); },
        choose(row) {
            if (!row) return;
            this.$refs.value.value = row.dataset.value;
            this.$refs.search.value = row.dataset.label;
            this.open = false;
            this.active = -1;
        },
        pick() { this.choose(this.rows()[this.active] ?? this.rows()[0]); }
     }"
     @click.outside="open = false"
     @keydown.escape="open = false"
     @htmx:after-swap="onResults()">
  <input type="hidden"
         name="{{ widget.name }}"
         id="{{ widget.select_id }}_value"
         value="{{ widget.selected_value }}"
         x-ref="value">
  <div class="input-group input-group-flat">
    <span class="input-group-text"><i class="ti ti-search"></i></span>
    <input type="search"
           id="{{ widget.select_id }}"
           class="form-control"
           placeholder="{{ widget.placeholder|default:_('Type to search…') }}"
           aria-label="{% trans 'Search' %}"
           autocomplete="off"
           value="{{ widget.selected_label }}"
           x-ref="search"
           name="q"
           hx-get="{{ widget.autocomplete_url }}"
           hx-trigger="keyup changed delay:300ms, search"
           hx-target="#{{ widget.select_id }}_results"
           hx-swap="innerHTML"
           @input="open = true; if (! $refs.search.value) { $refs.value.value = ''; }"
           @keydown.arrow-down.prevent="move(1)"
           @keydown.arrow-up.prevent="move(-1)"
           @keydown.enter.prevent="pick()"
           @keydown.tab="if (open && rows().length) pick()">
  </div>
  <div class="dropdown-menu w-100 position-absolute top-100 start-0 overflow-auto"
       :class="{show: open}"
       @click="choose($event.target.closest('[data-value]'))">
    <div id="{{ widget.select_id }}_results"></div>
  </div>
</div>