{% comment %}NexUI Select v1.0.0{% endcomment %}
<div class="flex flex-col gap-1.5 {{ container_class }}">
  {% if label %}
  <label
    {% if id %}for="{{ id }}"{% elif name %}for="{{ name }}"{% endif %}
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {{ label_class }}"
  >{{ label }}{% if required %}<span class="text-destructive ml-1">*</span>{% endif %}</label>
  {% endif %}

  <select
    name="{{ name }}"
    id="{{ id|default:name }}"
    {% if required %}required{% endif %}
    {% if disabled %}disabled{% endif %}
    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {{ input_class }}"
    {{ attrs }}
  >
    {% if placeholder %}<option value="">{{ placeholder }}</option>{% endif %}
    {% for choice in choices %}
    <option value="{{ choice.0 }}" {% if choice.0 == value %}selected{% endif %}>{{ choice.1 }}</option>
    {% endfor %}
  </select>

  {% if hint %}
  <p class="text-xs text-muted-foreground">{{ hint }}</p>
  {% endif %}

  {% if error %}
  <p class="text-xs text-destructive">{{ error }}</p>
  {% endif %}
</div>