{% block buy_widget_configurator %}
    <div class="product-detail-configurator">
        {% if elementId is defined and elementId is not null and pageType != 'product_detail' %}
            {% set config = {
                url: url('frontend.cms.buybox.switch', { productId: product.parentId }),
                elementId: elementId,
                pageType: pageType
            } %}
        {% else %}
            {% set config = {
                url: url('frontend.detail.switch', { productId: product.parentId }),
                pageType: pageType
            } %}
        {% endif %}

        {% block buy_widget_configurator_form %}
            <form data-variant-switch="true" data-variant-switch-options="{{ config|json_encode }}">
                {% block buy_widget_configurator_groups %}
                    {% for group in configuratorSettings %}
                        {% block buy_widget_configurator_group %}
                            {% if group.displayType == 'select' %}
                                <div class="product-detail-configurator-group mb-3">
                                    {% sw_include '@Storefront/storefront/component/buy-widget/configurator/select.html.twig' %}
                                </div>
                            {% else %}
                                <fieldset class="product-detail-configurator-group mb-3">
                                    {% block buy_widget_configurator_group_title %}
                                        <legend class="product-detail-configurator-group-title fs-5 fw-bold">
                                            {% block buy_widget_configurator_group_title_text %}
                                                {{ 'component.product.configurator.legend'|trans({ '%group_name%': group.translated.name, '%hidden_cls%': 'visually-hidden' })|sw_sanitize }}
                                            {% endblock %}
                                        </legend>
                                    {% endblock %}

                                    {% block buy_widget_configurator_options %}
                                        <div class="product-detail-configurator-options d-flex flex-wrap gap-2">
                                            {% for option in group.options %}
                                                {% if elementId is defined and elementId is not null %}
                                                    {% set optionIdentifier = [group.id, option.id, elementId]|join('-') %}
                                                {% else %}
                                                    {% set optionIdentifier = [group.id, option.id]|join('-') %}
                                                {% endif %}

                                                {% set isActive = false %}

                                                {% set isCombinableCls = option.combinable ? 'is-combinable' : 'not-combinable disabled' %}

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

                                                {% if option.configuratorSetting.media %}
                                                    {% set displayType = 'media' %}
                                                    {% set media = option.configuratorSetting.media %}
                                                {% else %}
                                                    {% set displayType = group.displayType %}
                                                    {% if option.media %}
                                                        {% set media = option.media %}
                                                    {% else %}
                                                        {% set media = false %}
                                                    {% endif %}
                                                {% endif %}

                                                {% block buy_widget_configurator_option %}
                                                    <div class="product-detail-configurator-option d-inline-flex">
                                                        {% block buy_widget_configurator_option_radio %}
                                                            <input type="radio"
                                                                   name="{{ group.id }}"
                                                                   value="{{ option.id }}"
                                                                   class="product-detail-configurator-option-input {{ isCombinableCls }} btn-check"
                                                                   id="{{ optionIdentifier }}"
                                                                   aria-labelledby="{{ optionIdentifier }}-label"
                                                                   {% if isActive %}checked="checked"{% endif %}>

                                                            {% block buy_widget_configurator_option_radio_label %}
                                                                <label class="product-detail-configurator-option-label {{ isCombinableCls }} is-display-{{ displayType }} btn btn-outline-secondary d-inline-flex justify-content-center align-items-center"
                                                                    {% if displayType == 'color' and option.colorHexCode %}
                                                                        style="background-color: {{ option.colorHexCode }}"
                                                                    {% endif %}
                                                                       title="{{ option.translated.name }}"
                                                                       id="{{ optionIdentifier }}-label"
                                                                       for="{{ optionIdentifier }}"
                                                                       aria-hidden="true">

                                                                    {% if displayType == 'media' and media %}
                                                                        {#
                                                                            The image is marked as decorative because the <label> text already describes it.
                                                                            Using alt text results in duplicate read out for screenreaders.
                                                                        #}
                                                                        {% block buy_widget_configurator_option_radio_label_media %}
                                                                            {% sw_thumbnails 'configurator-option-img-thumbnails' with {
                                                                                media: media,
                                                                                sizes: {
                                                                                    default: '52px'
                                                                                },
                                                                                attributes: {
                                                                                    class: 'product-detail-configurator-option-image h-100',
                                                                                    role: 'presentation',
                                                                                }
                                                                            } %}
                                                                        {% endblock %}
                                                                    {% endif %}

                                                                    {#
                                                                        Always offer an alternative text
                                                                        * Display type media or color with data: Text is visually hidden for screen readers.
                                                                        * Display type media or color without data: Text is shown as fallback.
                                                                        * Display type text: Text is shown.
                                                                    #}
                                                                    {% if displayType == 'media' and media or displayType == 'color' and option.colorHexCode %}
                                                                        <span class="visually-hidden">{{ option.translated.name }}</span>
                                                                    {% else %}
                                                                        {% block buy_widget_configurator_option_radio_label_text %}
                                                                            {{ option.translated.name }}
                                                                        {% endblock %}
                                                                    {% endif %}
                                                                    {% if not option.combinable %}
                                                                        <small class="visually-hidden">({{ 'detail.unavailableTooltip'|trans|sw_sanitize }})</small>
                                                                    {% endif %}
                                                                </label>
                                                            {% endblock %}
                                                        {% endblock %}
                                                    </div>
                                                {% endblock %}
                                            {% endfor %}
                                        </div>
                                    {% endblock %}
                                </fieldset>
                            {% endif %}
                        {% endblock %}
                    {% endfor %}
                {% endblock %}
            </form>
        {% endblock %}
    </div>
{% endblock %}