{% if row.searchable %}
  <div class="relative" x-data="{ open: false, label: {{ row.picked_label|tojson }} }"
       @click.outside="open = false">
    <input type="hidden" name="{{ row.path }}" value="{{ row.value }}" x-ref="key"
           id="field-{{ row.path }}">
    <div class="join w-full">
      <span class="input join-item w-full" x-text="label || 'Nothing chosen'"></span>
      <button class="btn join-item" type="button" @click="open = !open">Choose</button>
    </div>
    <div class="absolute z-30 mt-1 w-full rounded-box border border-base-300 bg-base-100 p-2 shadow-lg"
         x-show="open" x-cloak>
      <label class="input input-sm mb-1 w-full">
        <input type="search" name="q" class="grow" placeholder="Search"
               hx-get="{{ urls.lookup(view, row.path) }}"
               hx-target="#options-{{ row.path }}"
               hx-trigger="keyup changed delay:250ms, focus">
      </label>
      <div id="options-{{ row.path }}" class="max-h-60 overflow-auto"></div>
    </div>
  </div>
{% else %}
  <select class="select w-full {% if row.error %}select-error{% endif %} {% if row.field.collection %}h-auto py-2{% endif %}"
          id="field-{{ row.path }}" name="{{ row.path }}"
          {% if row.field.collection %}multiple size="5"{% endif %}>
    {% if not row.field.collection %}<option value="">Not set</option>{% endif %}
    {% for choice in row.choices %}
      <option value="{{ choice.value }}" {% if choice.value in row.selected %}selected{% endif %}>
        {{ choice.label }}
      </option>
    {% endfor %}
  </select>
{% endif %}