{# Many2one combobox — searchable, create-on-the-fly, open-record.

   Expected variables:
       name            field attribute name (form input name)
       comodel         comodel model name (e.g. "res.country")
       search_url      "/api/m2o/search?model=res.country"
       form_view_url   "/web/views/base/country.form" or None
       initial_id      currently selected record id (or None)
       initial_label   display label for the initial id (or "")
       readonly        bool
#}
<div class="pv-m2o relative"
     x-data='pvM2o({{ ({
        "name": name,
        "comodel": comodel,
        "searchUrl": search_url,
        "formViewUrl": form_view_url,
        "initialId": initial_id,
        "initialLabel": initial_label,
        "readonly": readonly,
     }) | tojson }})'
     @click.outside="open = false"
     @keydown.escape.prevent.stop="close()">

    {# Hidden input — the actual value submitted with the form. #}
    <input type="hidden" :name="name" :value="value === null ? '' : value">

    <div class="flex items-stretch gap-1">
        {# Combobox input. #}
        <div class="relative flex-1">
            <input type="text"
                   x-ref="input"
                   x-model="query"
                   :readonly="readonly"
                   @focus="onFocus()"
                   @input.debounce.250ms="onInput()"
                   @keydown.arrow-down.prevent="moveCursor(1)"
                   @keydown.arrow-up.prevent="moveCursor(-1)"
                   @keydown.enter.prevent="onEnter()"
                   placeholder="Search…"
                   autocomplete="off"
                   class="w-full border border-default bg-neutral-primary rounded px-2 py-1
                          text-sm text-heading
                          focus:outline-none focus:ring-2 focus:ring-fg-brand focus:border-fg-brand
                          disabled:cursor-not-allowed disabled:opacity-60">

            {# Clear button (only when a value is set and not readonly). #}
            <button type="button"
                    x-show="value !== null && !readonly"
                    @click.stop="clearSelection()"
                    aria-label="Clear"
                    class="absolute right-1.5 top-1/2 -translate-y-1/2 p-0.5 rounded
                           text-body-subtle hover:text-fg-danger hover:bg-danger-soft">
                <svg class="w-3 h-3" fill="none" stroke="currentColor"
                     viewBox="0 0 24 24" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        {# Open-record — Odoo-style button; loads the form in PvDialog. #}
        <button type="button"
                x-show="value !== null && formViewUrl"
                @click.stop="openRecord()"
                title="Open record"
                aria-label="Open record"
                class="pv-m2o-open inline-flex items-center justify-center w-6 h-6 rounded border border-default
                       bg-neutral-primary text-body-subtle hover:text-fg-brand hover:border-fg-brand shrink-0">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                 viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
            </svg>
        </button>
    </div>

    {# Dropdown. #}
    <div x-show="open" x-cloak x-transition.opacity.duration.100ms
         class="absolute left-0 right-0 top-full mt-1 z-50
                bg-neutral-primary border border-default rounded-md shadow-lg
                max-h-72 overflow-auto text-sm">
        <template x-if="loading">
            <div class="px-3 py-2 text-xs text-body-subtle">Searching…</div>
        </template>
        <template x-if="!loading && results.length === 0 && !createCandidate">
            <div class="px-3 py-2 text-xs text-body-subtle">No matches.</div>
        </template>
        <ul x-show="!loading && (results.length > 0 || createCandidate)" role="listbox">
            <template x-for="(item, i) in results" :key="item.id">
                <li :id="'pv-m2o-' + uid + '-' + i"
                    role="option"
                    @click="pick(item)"
                    @mousemove="cursor = i"
                    :class="i === cursor
                            ? 'bg-brand-softer text-fg-brand'
                            : 'text-body hover:bg-neutral-secondary'"
                    class="px-3 py-1.5 cursor-pointer flex items-center justify-between">
                    <span x-text="item.label" class="truncate"></span>
                    <span x-show="item.id === value" class="text-2xs text-fg-brand font-medium">selected</span>
                </li>
            </template>
            {# "Create '<query>'" entry — only when query is non-empty and
               no exact match exists. #}
            <template x-if="createCandidate">
                <li role="option"
                    @click="createFromQuery()"
                    @mousemove="cursor = results.length"
                    :class="cursor === results.length
                            ? 'bg-success-soft text-success-strong'
                            : 'text-fg-success hover:bg-neutral-secondary'"
                    class="px-3 py-1.5 cursor-pointer border-t border-default flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                         viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                    </svg>
                    <span>Create "<span x-text="query"></span>"</span>
                </li>
            </template>
            <template x-if="canCreateAndEdit">
                <li role="option"
                    @click="createAndEdit()"
                    class="px-3 py-1.5 cursor-pointer border-t border-default text-body
                           hover:bg-neutral-secondary flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor"
                         viewBox="0 0 24 24" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"/>
                    </svg>
                    Create and edit…
                </li>
            </template>
        </ul>
    </div>
</div>