{% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}


{% block page_product_detail %}
    <div class="product-detail"
         itemscope
         itemtype="https://schema.org/Product">
        {% block page_product_detail_inner %}
            {% block page_product_detail_content %}
                <div class="product-detail-content mb-0">
                    {% set mediaItems = page.product.media.media %}
                    {% block page_product_detail_main %}
                        <div class="row product-detail-main">
                            {% block page_product_detail_media %}
                                <div class="col-lg-6 product-detail-media">
                                    {% if page.product.media %}
                                        {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
                                            'mediaItems': mediaItems,
                                            'zoom': false,
                                            'zoomModal': true,
                                            'displayMode': 'contain',
                                            'gutter': 5,
                                            'minHeight': '660px',
                                            'navigationArrows': 'inside',
                                            'navigationDots': 'inside',
                                            'galleryPosition': 'left',
                                            'isProduct': true,
                                            'fallbackImageTitle': page.product.translated.name,
                                            'startIndexThumbnails': 1,
                                            'startIndexSlider': 1,
                                            'keepAspectRatioOnZoom': false
                                        } %}
                                    {% endif %}
                                </div>
                            {% endblock %}

                            {% block page_product_detail_buy %}
                                <div class="col-lg-6 product-detail-buy mb-0">
                                    {% block page_product_detail_headline %}
                                        <div class="bg-lighter p-3 p-md-5 mb-1">
                                            <div class="row align-items-center product-detail-headline mb-0">
                                                {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
                                            </div>
                                        </div>
                                    {% endblock %}

                                    <div class="bg-lighter p-3 py-md-4 px-md-5 mb-4">
                                        {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
                                    </div>

                                    {% if page.product.translated.description|raw || page.product.customFields.custom_wine_attributes_speiseempfehlung || page.product.customFields.custom_wine_attributes_trinktemperatur %}
                                        <div class="bg-lightest p-3 p-md-5 mt-4">
                                            <ul class="list-icons mb-0">
                                                {% if page.product.translated.description|raw %}
                                                    <li><i class="fa-kit fa-glass"></i>
                                                        <span>
                                                    <span>Beschreibung</span>
                                                    <span>{{ page.product.translated.description|raw }}</span>
                                                </span>
                                                    </li>
                                                {% endif %}
                                                {% if page.product.customFields.custom_wine_attributes_speiseempfehlung %}
                                                    <li><i class="fa-kit fa-besteck"></i>
                                                        <span>
                                                    <span>Speiseempfehlung</span>
                                                    <span> {{ page.product.customFields.custom_wine_attributes_speiseempfehlung|striptags|raw }}</span>
                                                </span>
                                                    </li>
                                                {% endif %}
                                                {% if page.product.customFields.custom_wine_attributes_trinktemperatur %}
                                                    <li><i class="fa-kit fa-temp"></i>
                                                        <span>
                                                    <span>Empfohlene Trinktemperatur</span>
                                                    <span>{{ page.product.customFields.custom_wine_attributes_trinktemperatur|striptags|raw }} °C</span>
                                                </span>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                        </div>
                                    {% endif %}

                                    <div class="text-center mt-4 mb-5">
                                        <a class="btn btn-outline-primary d-inline-block">
                                            <i class="fa-kit fa-download"></i> Expertise
                                        </a>
                                    </div>

                                    {% block page_product_detail_tabs %}
                                        <div class="product-detail-tab mt-5">
                                            {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
                                        </div>
                                    {% endblock %}
                                </div>
                            {% endblock %}
                        </div>
                    {% endblock %}
                </div>
            {% endblock %}

            {% block page_product_detail_cross_selling %}
                {% if page.crossSellings.elements is defined and page.crossSellings.elements|filter(item => item.total > 0)|length > 0 %}
                    <div class="product-detail-tabs product-detail-cross-selling mt-5 pt-md-5">
                        {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/inline.html.twig' with {
                            crossSellings: page.crossSellings
                        } %}
                    </div>
                {% endif %}
            {% endblock %}
        {% endblock %}
    </div>
{% endblock %}