{% block element_product_description_reviews %}
    {% set config = element.fieldConfig.elements %}
    {% set product = element.data.product %}
    {% set descriptionTabId = "description-tab-" ~ product.id %}
    {% set descriptionTabHref = "#description-tab-" ~ product.id ~ "-pane" %}
    {% set descriptionTabContent = "description-tab-" ~ product.id ~ "-pane" %}
    {% set reviewTabId = "review-tab-" ~ product.id %}
    {% set reviewTabHref = "#review-tab-" ~ product.id ~ "-pane" %}
    {% set reviewTabContent = "review-tab-" ~ product.id ~ "-pane" %}

    {% if element.data.product %}
        <div class="product-detail-tabs cms-element-{{ element.type }}{% if config.alignment.value %} has-vertical-alignment{% endif %}">
            {% if config.alignment.value %}
                <div class="cms-element-alignment{% if config.alignment.value == "center" %} align-self-center{% elseif config.alignment.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
            {% endif %}
                <div class="card card-tabs">
                    {% block element_product_description_reviews_tabs_navigation %}
                        <div class="cms-card-header card-header product-detail-tab-navigation product-description-reviews-tab-navigation">
                            {% block element_product_description_reviews_tabs_navigation_container %}
                                <ul class="nav nav-tabs product-detail-tab-navigation-list"
                                    id="product-detail-tabs"
                                    role="tablist">
                                    {% block element_product_description_reviews_tabs_navigation_description %}
                                        <li class="nav-item">
                                            <a class="nav-link {% if (ratingSuccess != 1) and (ratingSuccess != -1) %}active{% endif %} product-detail-tab-navigation-link description-tab"
                                               id="{{ descriptionTabId }}"
                                               data-bs-toggle="tab"
                                               data-off-canvas-tabs="true"
                                               href="{{ descriptionTabHref }}"
                                               role="tab"
                                               aria-controls="{{ descriptionTabContent }}"
                                               aria-selected="true">
                                                <span>{{ "detail.tabsDescription"|trans|sw_sanitize }}</span>
                                                <span class="product-detail-tab-navigation-icon">
                                                    {% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
                                                </span>
                                                {% if element.data.product.translated.description|length > 0 %}
                                                    <span class="product-detail-tab-preview">
                                                        {{ page.product.translated.description|striptags|u.truncate(125, '…')|raw }}

                                                        {# truncate always cuts down the length to 125 characters.
                                                               So it will only shorten the string if it exceeds 125 chars.
                                                               Therefor, only show the button when the length of the text is
                                                               greater or equal then 126 characters. #}
                                                        {% if element.data.product.translated.description|length >= 126 %}
                                                            <span class="product-detail-tab-preview-more">{{ "detail.tabsPreviewMore"|trans|sw_sanitize }}</span>
                                                        {% endif %}
                                                        </span>
                                                {% endif %}
                                            </a>
                                        </li>
                                    {% endblock %}

                                    {% block element_product_description_reviews_tabs_navigation_review %}
                                        {% if config('core.listing.showReview') %}
                                            <li class="nav-item">
                                                <a class="nav-link {% if (ratingSuccess == 1) or (ratingSuccess == -1) %}active{% endif %} product-detail-tab-navigation-link review-tab"
                                                   id="{{ reviewTabId }}"
                                                   data-bs-toggle="tab"
                                                   data-off-canvas-tabs="true"
                                                   href="{{ reviewTabHref }}"
                                                   role="tab"
                                                   aria-controls="{{ reviewTabContent }}"
                                                   aria-selected="true">
                                                    {{ "detail.tabsReview"|trans|sw_sanitize }}
                                                    <span class="product-detail-tab-navigation-icon">
                                                        {% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
                                                    </span>
                                                </a>
                                            </li>
                                        {% endif %}
                                    {% endblock %}
                                </ul>
                            {% endblock %}
                        </div>
                    {% endblock %}

                    {% block element_product_description_reviews_tabs_content %}
                        <div class="product-detail-tabs-content card-body">
                            {% block element_product_description_reviews_tabs_content_container %}
                                <div class="tab-content">
                                    {% block element_product_description_reviews_tabs_content_description %}
                                        <div class="tab-pane fade show {% if (element.data.ratingSuccess != 1) and (element.data.ratingSuccess != -1) %}active{% endif %}"
                                             id="{{ descriptionTabContent }}"
                                             role="tabpanel"
                                             aria-labelledby="{{ descriptionTabId }}">
                                            {% sw_include '@Storefront/storefront/component/product/description.html.twig' with {
                                                product: element.data.product
                                            } %}
                                        </div>
                                    {% endblock %}

                                    {% block element_product_description_reviews_tabs_content_review %}
                                        {% if config('core.listing.showReview') %}
                                            <div class="tab-pane fade show {% if (element.data.ratingSuccess == 1) or (element.data.ratingSuccess == -1) %}active{% endif %}"
                                                 id="{{ reviewTabContent }}"
                                                 role="tabpanel"
                                                 aria-labelledby="{{ reviewTabId }}">
                                                {% sw_include '@Storefront/storefront/component/review/review.html.twig' with {
                                                    reviews: element.data.reviews,
                                                    product: element.data.product
                                                } %}
                                            </div>
                                        {% endif %}
                                    {% endblock %}
                                </div>
                            {% endblock %}
                        </div>
                    {% endblock %}
                </div>
            {% if config.verticalAlign.value %}
                </div>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}