{#
/**
 * @file
 * Template for Select component.
 */
#}
{% set name = name|default(id) %}
{% set disabled = disabled|default(false) %}
{% set required = required|default(false) %}

{% set wrapper_classes = [
  'kern-form-input',
  error ? 'kern-form-input--error',
] %}

{% set select_classes = [
  'kern-form-input__select',
  error ? 'kern-form-input__select--error',
] %}

<div {{ attributes.addClass(wrapper_classes) }}>
  <label class="kern-label" for="{{ id }}">
    {{ label }}
    {% if not required %}
      <span class="kern-label__optional">- Optional</span>
    {% endif %}
  </label>
  
  {% if hint %}
    <div class="kern-hint" id="{{ id }}-hint">
      {{ hint }}
    </div>
  {% endif %}
  
  <div class="kern-form-input__select-wrapper">
    <select
      class="{{ select_classes|join(' ') }}"
      id="{{ id }}"
      name="{{ name }}"
      {% if disabled %}disabled{% endif %}
      {% if required %}required{% endif %}
      {% if hint %}aria-describedby="{{ id }}-hint"{% endif %}
    >
      {% if options %}
        {{ options }}
      {% else %}
        {% for option in options %}
          <option value="{{ option.value }}">{{ option.label }}</option>
        {% endfor %}
      {% endif %}
    </select>
  </div>
  
  {% if error %}
    <p class="kern-error" id="{{ id }}-error" role="alert">
      <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
      <span class="kern-body">{{ error }}</span>
    </p>
  {% endif %}
</div>

