{% set label = label|default %}
{% set value = value|default %}
{% set instructions = instructions|default %}
{% set id = id|default("select" ~ random(5000)) %}
{% set name = name|default(id) %}
{% set error = error|default %}
{% set isDisabled = isDisabled|default(false) %}
{% set isRequired = isRequired|default(false) %}
{% set options = options|default([]) %}
{% set hideLabel = hideLabel|default %}
{% set attributes = attributes ?? {} %}
{% set classes = classes|default %}
{% set ariaControls = ariaControls|default %}

{% import "macros" as macros %}

<div class="form-select {{ classes }} {{ hideLabel ? " form-select--hide-label" }}">
	<label class="form-select__label" for="{{ id }}">
		{{ label }}
	</label>

	<div class="relative form-select__content">
		<select class="form-select__select bg-none" id="{{ id }}" name="{{ name }}" {{ isDisabled ? "disabled" }} {{ isRequired ? "required" }} {{ macros.addAttributes(attributes) }} {% if ariaControls %} aria-controls="{{ ariaControls }}" {% endif %}>
			{% for option in options %}
				{% if option.group|default %}
					<optgroup label="{{ option.group.label }}">
						{% for groupOption in option.group.options %}
							<option value="{{ groupOption.value }}" {{ value == groupOption.value ? "selected" }}>
								{{ groupOption.label }}
							</option>
						{% endfor %}
					</optgroup>
				{% else %}
					<option value="{{ option.value }}" {{ value == option.value ? "selected" }}>
						{{ option.label }}
					</option>
				{% endif %}
			{% endfor %}
		</select>

		{% if isRequired %}
			<span class="required">*</span>
		{% endif %}

		<div class="form-select__icon text-white h-4 w-4 absolute top-1/2 right-6 -translate-y-2.5 pointer-events-none">
			{{ macros.icon("custom/arrow-down-polygon") }}
		</div>
	</div>

	{% if instructions %}
		<div class="form-select__instructions">
			{{ instructions }}
		</div>
	{% endif %}

	{% if error %}
		<div class="form-select__error">
			{{ error }}
		</div>
	{% endif %}
</div>