{% set oSelections = oSelectionList.getSelections() %}

{% if oSelections %}
    <div class="mb-3 c4s-details-article-variant-selector">
        {% if not blHideLabel %}
            <div class="c4s-details-article-variant-label">
                <strong>{{ oSelectionList.getLabel() }}{{ translate({ ident: "COLON" }) }}</strong>
            </div>
        {% endif %}

        {% if not sSelType or sSelType == "seldrop" %}
            <div class="dropdown-wrapper">
                <button type="button" class="btn btn-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside">
                    {% set oActiveSelection = oSelectionList.getActiveSelection() %}

                    <span>
                        {% if oActiveSelection %}
                            {{ oActiveSelection.getName() }}
                        {% elseif not blHideDefault %}
                            {% if sFieldName == "sel" %}
                                {{ translate({ ident: "PLEASE_CHOOSE" }) }}
                            {% else %}
                                {{ oSelectionList.getLabel() }} {{ translate({ ident: "CHOOSE_VARIANT" }) }}
                            {% endif %}
                        {% endif %}
                    </span>

                    <i class="fa-solid fa-angle-down"></i>
                </button>

                {% block product_selectbox_variantselect_dropdown %}
                    <input type="hidden" name="{{ sFieldName|default("varselid") }}[{{ iKey }}]" value="{% if oActiveSelection %}{{ oActiveSelection.getValue() }}{% endif %}">
                    <ul class="dropdown-menu {{ sJsAction }}{% if sFieldName != "sel" %} vardrop{% endif %}" role="menu">
                        {% if oActiveSelection and not blHideDefault %}
                            <li>
                                <a type="button" class="dropdown-item">
                                    {% if sFieldName == "sel" %}
                                        {{ translate({ ident: "PLEASE_CHOOSE" }) }}
                                    {% else %}
                                        {{ translate({ ident: "CHOOSE_VARIANT" }) }}
                                    {% endif %}
                                </a>
                            </li>
                        {% endif %}
                        {% for oSelection in oSelections %}
                            <li {% if oSelection.isDisabled() %}class="disabled"{% endif %}>
                                <a type="button"
                                   data-selection-id="{{ oSelection.getValue() }}"
                                   class="dropdown-item{% if oSelection.isActive() %} active{% endif %}"
                                >{{ oSelection.getName() }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endblock %}
            </div>

        {# variant select buttons #}
        {% elseif sSelType == "selbuttons" %}
            {% set oActiveSelection = oSelectionList.getActiveSelection() %}

            <input type="hidden" name="{{ sFieldName|default("varselid") }}[{{ iKey }}]" value="{% if oActiveSelection %}{{ oActiveSelection.getValue() }}{% endif %}">
            {% for oSelection in oSelections %}
                <a role="button" class="btn btn-secondary btn-var-sel btn-sm {% if oSelection.isDisabled() %}disabled{% elseif oSelection.isActive() %}active{% endif %}" data-selection-id="{{ oSelection.getValue() }}">
                    {{ oSelection.getName() }}
                </a>
            {% endfor %}
        {% endif %}
    </div>
{% endif %}