{#
    -- Select Form Field Component --

    This component makes it easier to use select fields in a form.
    It will implement all necessary accessibility best-practices and field validation for you.

    Properties:

    * id (required) - The id attriute of the input field.
    * name (required) - The name attribute of the input field.
    * options (required) - The options of the select field. Use the set method in Twig to create a template string that will rendered.
    * label (optional) - The text content of the field label.
    * disabled (optional) - The disabled attribute of the input field.
    * validationRules (optional) - A comma-separated list of rules the field should be validated against via client validation.
    * violationPath (optional) - The key under which validation errors are stored within the response of a server validation.
    * additionalClass (optional) - Additional css class names that are added to the form-group wrapper element.
    * additionalSelectClass (optional) - Additional css class names that are adedd to the select element.
    * attributes (optional) - Additional attributes that are added to the select element.
#}
{% block component_form_select %}

    {% set feedbackId = "#{id}-feedback" %}
    {% set descriptionId = "#{id}-description" %}

    {% set areaDescribedBy = "#{feedbackId}" %}

    {% if description is not empty %}
        {% set areaDescribedBy = "#{descriptionId} #{feedbackId}" %}
    {% endif %}

    <div class="form-group{% if additionalClass is not empty %} {{ additionalClass }}{% endif %}">
        {% block component_form_select_label %}
            {% if label %}
                <label class="form-label" for="{{ id }}">
                    {{ label|raw }}

                    {% if 'required' in validationRules %}
                        <span class="form-required-label" aria-hidden="true">{{ 'general.required'|trans|sw_sanitize }}</span>
                    {% endif %}
                </label>
            {% endif %}
        {% endblock %}

        {% block component_form_select_select %}
            {% set cssClass = 'form-select' %}

            {% if additionalSelectClass is not empty %}
                {% set cssClass = "#{cssClass} #{additionalSelectClass}" %}
            {% endif %}

            {% if violationPath is not empty and formViolations.getViolations(violationPath) is not empty %}
                {% set cssClass = "#{cssClass} is-invalid" %}
            {% endif %}

            <select class="{{ cssClass }}"
                    id="{{ id }}"
                    name="{{ name }}"
                    aria-describedby="{{ areaDescribedBy }}"
                    {% if autocomplete is not empty %}autocomplete="{{ autocomplete }}"{% endif %}
                    {% if validationRules is not empty %}data-validation="{{ validationRules }}"{% endif %}
                    {% if 'required' in validationRules %}aria-required="true"{% endif %}
                    {% if attributes is not empty %}{% for key, value in attributes %}{% if value is not empty %}{{ key ~ '=' ~ value ~ ' ' }}{% endif %}{% endfor %}{% endif %}
                    {% if disabled is not empty %}disabled{% endif %}>
                {% block component_form_select_select_options %}
                    {{ options }}
                {% endblock %}
            </select>
        {% endblock %}

        {% block component_form_select_description %}
            {% if description is not empty %}
                <small id="{{ descriptionId }}" class="form-text">{{ description }}</small>
            {% endif %}
        {% endblock %}

        {% block component_form_select_feedback %}
            <div id="{{ feedbackId }}" class="form-field-feedback">
                {% block component_form_input_feedback_violations %}
                    {% if violationPath is not empty and formViolations.getViolations(violationPath) is not empty %}
                        {% sw_include '@Storefront/storefront/utilities/form-violation.html.twig' %}
                    {% endif %}
                {% endblock %}
            </div>
        {% endblock %}
    </div>

{% endblock %}