{% extends 'pageTemplateProducts.html.twig' %}
{% block content %}
{% set productName = product.getName() %}
<div class="section">
<div class="has-background">
<div class="main-content flex-col">
<div class="col xs-12 m-6">
{% set galleryItems = product.getGallery().getItems() %}
{% if(galleryItems|length > 0) %}
<div class="product-item-image-wrapper slider slick-slider has-slider">
{% else %}
<div class="slider slick-slider">
{% endif %}
<div class="product-image-item">
{% set productDetailImage = product.getDetailViewRepresentationNew() |objectFallbackImage %}
{{ productDetailImage.getThumbnail("productImageDetail" ~bundleName).getHtml() |raw }}
</div>
{% if(product.getGallery) %}
{% for gallery in product.getGallery %}
{% if gallery != null %}
<div class="product-image-item">
{{ gallery.getImage().getThumbnail("productGalleryDetail" ~bundleName).getHtml() |raw }}
</div>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
<div class="col xs-12 m-6">
<div class="product-info-container text-only">
<div class="product-title-container">
<h1>{{ productName |trademark }}</h1>
</div>
<div class="product-short-description-container">
<span class="no-padding">{{ product.getTextContentByType("shortTextRepresentation", document) | raw }}</span>
</div>
</div>
{% if isProductFood %}
<div class="sales-description-wrapper">
{{ product.getSalesDescription() }}
</div>
<div id="tabber-xyz" class="tabber" data-tab-type="default">
<ul class="tabs resp-tabs-list tab-id">
<li>{{ 'Nährwerte' |trans }}</li>
<li>{{ 'Zutaten' |trans }}</li>
</ul>
<div class="resp-tabs-container tab-id">
<div class="tab-content">
{% include 'Partials/NutritionFactsDefault.html.twig' %}
</div>
<div class="tab-content">
{% include 'Partials/IngredientsDefault.html.twig' %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}