{# @deprecated tag:v6.6.0 - Template will be removed and replaced by configurable product detail cms pages.
    Use `@Storefront/storefront/page/content/product-detail.html.twig` instead #}
{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_head %}
    {% sw_include '@Storefront/storefront/page/product-detail/meta.html.twig' %}
{% endblock %}

{% block base_content %}
    {% 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">
                        {% block page_product_detail_headline %}
                            <div class="row align-items-center product-detail-headline">
                                {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
                            </div>
                        {% endblock %}

                        {% 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-7 product-detail-media">
                                        {% if page.product.media %}
                                            {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
                                                'mediaItems': mediaItems,
                                                'zoom': true,
                                                'zoomModal': true,
                                                'displayMode': 'contain',
                                                'gutter': 5,
                                                'minHeight': '430px',
                                                '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-5 product-detail-buy">
                                        {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
                                    </div>
                                {% endblock %}
                            </div>
                        {% endblock %}
                    </div>
                {% endblock %}

                {% block page_product_detail_tabs %}
                    <div class="product-detail-tabs">
                        {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
                    </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">
                            {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with {
                                crossSellings: page.crossSellings
                            } %}
                        </div>
                    {% endif %}
                {% endblock %}
            {% endblock %}
        </div>
    {% endblock %}
{% endblock %}
