{% block buy_widget_configurator_group_select %}
    {% block buy_widget_configurator_group_select_title %}
        <label class="product-detail-configurator-group-title fs-5 fw-bold" for="{{ group.id }}">
            {% block buy_widget_configurator_group_title_text %}
                {{ 'component.product.configurator.legend'|trans({ '%group_name%': group.translated.name, '%hidden_cls%': 'visually-hidden' })|sw_sanitize }}
            {% endblock %}
        </label>

        {% block buy_widget_configurator_select %}
            <select name="{{ group.id }}" id="{{ group.id }}" class="form-select product-detail-configurator-select-input">
                {% for option in group.options %}

                    {% set selected = false %}
                    {% set optionName = option.translated.name %}

                    {% if option.id in page.product.optionIds %}
                        {% set selected = true %}
                    {% endif %}

                    {% if not option.combinable %}
                        {% set optionName =  optionName ~ ' (' ~ ('detail.unavailable'|trans|sw_sanitize) ~ ')' %}
                    {% endif %}

                    {% block buy_widget_configurator_select_option %}
                        <option value="{{ option.id }}"
                            {% if selected %} selected="selected"{% endif %}
                            {% if not option.combinable %}title="{{ 'detail.unavailableTooltip'|trans|striptags }}"{% endif %}
                        >
                            {{ optionName }}
                        </option>
                    {% endblock %}
                {% endfor %}
            </select>
        {% endblock %}
    {% endblock %}
{% endblock %}