{% comment %}
Select component (requires JS)
Usage:
  <c-select name="country" label="Select a country">
    <c-select.option value="us" label="United States">United States</c-select.option>
    <c-select.option value="uk" label="United Kingdom">United Kingdom</c-select.option>
    <c-select.option value="ca" label="Canada">Canada</c-select.option>
  </c-select>
  
  With search:
  <c-select name="city" label="Select a city" searchable="true">...</c-select>
{% endcomment %}
<div class="select {{ class }}" {{ attrs }}>
  <button type="button" class="btn-outline justify-between font-normal w-full" aria-expanded="false" {% if disabled %}disabled{% endif %}>
    <span class="truncate">{{ label|default:"Select..." }}</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground opacity-50 shrink-0"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
  </button>
  <input type="hidden" {% if name %}name="{{ name }}"{% endif %} {% if value %}value="{{ value }}"{% endif %} />
  <div data-popover aria-hidden="true">
    {% if searchable %}
    <header>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </svg>
      <input type="text" placeholder="{{ search_placeholder|default:'Search...' }}" autocomplete="off" autocorrect="off" spellcheck="false" aria-autocomplete="list" role="combobox" />
    </header>
    {% endif %}
    <div role="listbox">
      {{ slot }}
    </div>
  </div>
</div>