<div x-data="{isOpened:false, text:'{{txt}}',value:'{{value}}'}" class="relative">
  <select name="{{ widget.name }}" {% include "mirforms/widgets/htmx_select/htmx_select_attrs.html" %} class="hidden">
    <option :value="value" :text="text"></option>
  </select>

  <input x-ref="{{ widget_name }}_select" type="text" {% if widget.attrs.class %}class="{{widget.attrs.class}}"{% endif %} @click="isOpened=!isOpened"
  @keydown.escape="isOpened=false" value='{{txt}}' {% if widget.attrs.required %}required{% endif %} readonly/>
  
  <div 
    x-show="isOpened"
    @click.away="isOpened=false"
    @keydown.escape="isOpened=false"
    x-transition:enter="transform ease-out duration-200 transition"
    x-transition:enter-start="-translate-y-2 opacity-0"
    x-transition:enter-end="-translate-y-0 opacity-100"
    x-transition:leave="transition ease-in duration-100"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="absolute w-full py-1 mt-1 overflow-hidden bg-white border border-gray-300 rounded-md shadow-lg" style="display:none">

    <div class="flex border-b border-gray-200">
      <input
        hx-post="{{url|add:'?select='|add:select_url}}" 
        hx-trigger="keyup changed delay:500ms" hx-target="#{{ widget.name }}-results" hx-select="li" hx-swap="innerHTML" type="search" name="query" class="w-full pl-4 m-2 text-xs border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" autocomplete="off" placeholder="Rechercher" >
    </div>
    
    <ul id="{{ widget.name }}-results" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-item-3" class="py-1 overflow-auto text-base max-h-60 focus:outline-none sm:text-sm">
      {% include "mirforms/widgets/htmx_select/htmx_select_wrapper.html" with queryset=queryset %}
    </ul>
    <script>
      window.{{ widget_name }}AlpineClick = function (txt, val, target) {
        target.value = txt;
        const eventName = '{{widget.attrs.id}}_changed'.replaceAll('_', '-');
        const event = new CustomEvent(eventName, {
          detail: {
					  txt, val
				  }
        });
        window.dispatchEvent(event);
      }
    </script>
  </div>
</div>
