{% sw_extends '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
{% set crossSellings = page.crossSellings %}
{% block page_product_detail_tabs_navigation %}
<div class="card-header product-detail-tab-navigation">
{% block page_product_detail_tabs_navigation_container %}
<ul class="nav nav-tabs product-detail-tab-navigation-list"
id="product-detail-tabs"
role="tablist">
{% block page_product_detail_tabs_navigation_description %}
<li class="nav-item">
<a class="nav-link {% if (ratingSuccess != 1) and (ratingSuccess != -1) %}active{% endif %} product-detail-tab-navigation-link"
id="description-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#description-tab-pane"
role="tab"
aria-controls="description-tab-pane"
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 page.product.translated.description|length > 0 %}
<span class="product-detail-tab-preview">
{{ page.product.translated.description|raw|striptags|sw_sanitize|u.truncate(125, '…') }}
{% if page.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 page_product_detail_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"
id="review-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#review-tab-pane"
role="tab"
aria-controls="review-tab-pane"
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 %}
{% for item in crossSellings %}
{% set id = item.crossSelling.id %}
{% if item.crossSelling.active and item.getProducts().elements %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="cs-{{ id }}-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#cs-{{ id }}-tab-pane"
role="tab"
aria-controls="cs-{{ id }}-tab-pane"
aria-selected="true">
{{ item.crossSelling.translated.name }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% endblock %}
</div>
{% endblock %}
{% block page_product_detail_tabs_content_container %}
<div class="tab-content">
{% block page_product_detail_tabs_content_description %}
<div class="tab-pane fade show {% if (ratingSuccess != 1) and (ratingSuccess != -1) %}active{% endif %}"
id="description-tab-pane"
role="tabpanel"
aria-labelledby="description-tab">
{% sw_include '@Storefront/storefront/page/product-detail/description.html.twig' %}
</div>
{% endblock %}
{% block page_product_detail_tabs_content_review %}
{% if config('core.listing.showReview') %}
<div class="tab-pane fade show {% if (ratingSuccess == 1) or (ratingSuccess == -1) %}active{% endif %}"
id="review-tab-pane"
role="tabpanel"
aria-labelledby="review-tab">
{% sw_include '@Storefront/storefront/page/product-detail/review/review.html.twig' with {'reviews': page.reviews} %}
</div>
{% endif %}
{% endblock %}
{% for item in crossSellings %}
{% set id = item.crossSelling.id %}
{% if item.crossSelling.active and item.getProducts().elements %}
<div class="tab-pane fade show cross-selling-tab"
id="cs-{{ id }}-tab-pane"
role="tabpanel"
aria-labelledby="cs-{{ id }}-tab">
<h3>{{ item.crossSelling.translated.name }}</h3>
<div class="row">
{% for product in item.getProducts().elements %}
<div class="col-12 col-md-6 col-lg-4 mt-3">
{% block element_product_listing_box %}
{% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
'layout': boxLayout,
'displayMode': displayMode,
'product':product
} %}
{% endblock %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endblock %}