{#- One record in a picker's list, whether the list is in the page or came
    back from a search. A press keeps the typing in the box, and a click
    chooses; Enter clicks the highlighted one. Single quotes, because a
    record's name may hold a double quote. -#}
{% import "adminsite/_icons.html" as icons %}
<li role="option" class="flex cursor-pointer items-center gap-2 rounded-field px-2.5 py-1.5 data-[active=true]:bg-base-200"
    data-value="{{ choice.value }}"
    x-show='offers({{ choice.value|tojson }}, {{ choice.label|tojson }})'
    :aria-selected='holds({{ choice.value|tojson }}).toString()'
    @mousedown.prevent @mouseenter="hover($el)"
    @click='choose({{ choice.value|tojson }}, {{ choice.label|tojson }})'>
  <span class="inline-flex w-3.5 shrink-0 text-primary"><span class="inline-flex" x-show='holds({{ choice.value|tojson }})'>{{ icons.icon("check", 14) }}</span></span>
  <span class="min-w-0 break-words">{{ choice.label }}</span>
</li>