{#
/**
 * @file
 * Theme override for a select element.
 */
#}
<select{{ attributes.addClass('w-full', 'px-4', 'py-3', 'border', 'border-gray-300', 'rounded-lg', 'text-gray-900', 'text-sm', 'bg-white', 'transition-all', 'duration-150', 'ease-in-out', 'appearance-none', 'focus:outline-none', 'focus:border-blue-500', 'focus:ring-2', 'focus:ring-blue-500/20', 'bg-no-repeat', 'cursor-pointer') }} style="background-image: url(&quot;data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e&quot;); background-position: right 0.75rem center; background-size: 1.25em 1.25em; padding-right: 2.5rem;">
  {% for option in options %}
    {% if option.type == 'optgroup' %}
      <optgroup label="{{ option.label }}">
        {% for sub_option in option.options %}
          <option value="{{ sub_option.value }}"{{ sub_option.selected ? ' selected="selected"' }}>{{ sub_option.label }}</option>
        {% endfor %}
      </optgroup>
    {% elseif option.type == 'option' %}
      <option value="{{ option.value }}"{{ option.selected ? ' selected="selected"' }}>{{ option.label }}</option>
    {% endif %}
  {% endfor %}
</select>
