{% sw_extends '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
{% set variant_products = page.extensions.associated_products.elements.variant_products.elements %}
{% set color_variant_products = page.extensions.associated_products.elements.color_variant_products.elements %}
{% set capacity_variant_products = page.extensions.associated_products.elements.capacity_variant_products.elements %}
{% set alternate_products = page.extensions.associated_products.elements.alternate_products.elements %}
{% set bundled_products = page.extensions.associated_products.elements.bundled_products.elements %}
{% set bundles = page.extensions.associated_products.elements.bundles.elements %}
{% set related_products = page.extensions.associated_products.elements.related_products.elements %}
{% set similar_products = page.extensions.associated_products.elements.similar_products.elements %}
{% set feed_product_devices = page.extensions.feed_product_devices %}
{% set listingColumns = 'col-sm-6 col-lg-4 col-xl-3' %}
{% block page_product_detail_tabs_navigation_description %}
{{ parent() }}
{% if(feed_product_devices) %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link topdata-top-feed-product-devices-load-tab"
id="feed-devices-tab"
data-productid="{{ page.product.id }}"
data-path="{{ path('frontend.topdata_top_feed.compatible_devices', {productid: page.product.id}) }}"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#feed-devices-tab-pane"
role="tab"
aria-controls="feed-devices-tab-pane"
aria-selected="true">
{{ "topdata-topfeed.product.devices"|trans|sw_sanitize }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% if(variant_products) %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="variant-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#variant-tab-pane"
role="tab"
aria-controls="variant-tab-pane"
aria-selected="true">
{{ "topdata-topfeed.product.variants"|trans|sw_sanitize }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% if(color_variant_products) %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="color-variant-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#color-variant-tab-pane"
role="tab"
aria-controls="color-variant-tab-pane"
aria-selected="true">
{{ "topdata-topfeed.product.colors"|trans|sw_sanitize }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% if(capacity_variant_products) %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="capacity-variant-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#capacity-variant-tab-pane"
role="tab"
aria-controls="capacity-variant-tab-pane"
aria-selected="true">
{{ "topdata-topfeed.product.capacity"|trans|sw_sanitize }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% if(alternate_products) %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="alternate-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#alternate-tab-pane"
role="tab"
aria-controls="alternate-tab-pane"
aria-selected="true">
{{ "topdata-topfeed.product.alternate"|trans|sw_sanitize }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% if(bundled_products) %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="bundled-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#bundled-tab-pane"
role="tab"
aria-controls="bundled-tab-pane"
aria-selected="true">
{{ "topdata-topfeed.product.bundled"|trans|sw_sanitize }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% if(bundles) %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="bundles-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#bundles-tab-pane"
role="tab"
aria-controls="bundles-tab-pane"
aria-selected="true">
{{ "topdata-topfeed.product.bundles"|trans|sw_sanitize }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% if(related_products) %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="related-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#related-tab-pane"
role="tab"
aria-controls="related-tab-pane"
aria-selected="true">
{{ "topdata-topfeed.product.related"|trans|sw_sanitize }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% if(similar_products) %}
<li class="nav-item">
<a class="nav-link product-detail-tab-navigation-link"
id="similar-tab"
data-toggle="tab"
data-offcanvas-tabs="true"
href="#similar-tab-pane"
role="tab"
aria-controls="similar-tab-pane"
aria-selected="true">
{{ "topdata-topfeed.product.similar"|trans|sw_sanitize }}
<span class="product-detail-tab-navigation-icon">
{% sw_icon 'arrow-medium-right' style {'pack':'solid'} %}
</span>
</a>
</li>
{% endif %}
{% endblock %}
{% block page_product_detail_tabs_content_description %}
{{ parent() }}
{% if(feed_product_devices) %}
<div class="tab-pane fade show"
id="feed-devices-tab-pane"
role="tabpanel">
{% sw_include '@Storefront/storefront/page/product-detail/feed-devices-tab.html.twig' %}
</div>
{% endif %}
{% if(variant_products) %}
<div class="tab-pane fade show"
id="variant-tab-pane"
role="tabpanel">
{% sw_include '@Storefront/storefront/page/product-detail/products-tab.html.twig' with {products:variant_products} %}
</div>
{% endif %}
{% if(color_variant_products) %}
<div class="tab-pane fade show"
id="color-variant-tab-pane"
role="tabpanel">
{% sw_include '@Storefront/storefront/page/product-detail/products-tab.html.twig' with {
products:color_variant_products,
otherDevices: page.extensions.productColorsOtherDevices.all
} %}
</div>
{% endif %}
{% if(capacity_variant_products) %}
<div class="tab-pane fade show"
id="capacity-variant-tab-pane"
role="tabpanel">
{% sw_include '@Storefront/storefront/page/product-detail/products-tab.html.twig' with {
products:capacity_variant_products,
otherDevices: page.extensions.productCapacitiesOtherDevices.all
} %}
</div>
{% endif %}
{% if(alternate_products) %}
<div class="tab-pane fade show"
id="alternate-tab-pane"
role="tabpanel">
{% sw_include '@Storefront/storefront/page/product-detail/products-tab.html.twig' with {products:alternate_products} %}
</div>
{% endif %}
{% if(bundled_products) %}
<div class="tab-pane fade show"
id="bundled-tab-pane"
role="tabpanel">
{% sw_include '@Storefront/storefront/page/product-detail/products-tab.html.twig' with {products:bundled_products} %}
</div>
{% endif %}
{% if(bundles) %}
<div class="tab-pane fade show"
id="bundles-tab-pane"
role="tabpanel">
{% sw_include '@Storefront/storefront/page/product-detail/products-tab.html.twig' with {products:bundles} %}
</div>
{% endif %}
{% if(related_products) %}
<div class="tab-pane fade show"
id="related-tab-pane"
role="tabpanel">
{% sw_include '@Storefront/storefront/page/product-detail/products-tab.html.twig' with {products:related_products} %}
</div>
{% endif %}
{% if(similar_products) %}
<div class="tab-pane fade show"
id="similar-tab-pane"
role="tabpanel">
{% sw_include '@Storefront/storefront/page/product-detail/products-tab.html.twig' with {products:similar_products} %}
</div>
{% endif %}
{% endblock %}