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

{% block page_product_detail_media %}
    <div class="col-lg-8 col-xl-{{ galleryWidthConfig }} product-detail-media"
            {% if galleryMode is same as ('scroller') %}data-zen-gallery-scroller="true"{% endif %}>
        {% if page.product.media %}
            {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
                'mediaItems': mediaItems,
                'zoom': zoomConfig,
                'zoomModal': zoomModalConfig,
                'displayMode': displayModeConfig,
                'verticalAlign': verticalAlignConfig,
                'gutter': gutterConfig,
                'minHeight': minHeightConfig,
                'navigationArrows': navigationArrowsConfig,
                'navigationDots': navigationDotsConfig,
                'galleryPosition': galleryPositionConfig,
                'hideThumbnails': hideThumbnailsConfig,
                'isProduct': true,
                'fallbackImageTitle': page.product.translated.name,
                'startIndexThumbnails': page.product.cover.position + 1,
                'startIndexSlider': page.product.cover.position + 1,
                'keepAspectRatioOnZoom': keepAspectRatioOnZoom
            } %}
        {% endif %}
    </div>
{% endblock %}

{% block page_product_detail_buy %}
    <div class="col-lg-4 col-xl-{{ buyboxWidthConfig }} product-detail-buy" data-sticky-buybox="true">
        <div class="inside">

        {# ... add headline here #}
        {% block page_product_detail_headline %}
            <div class="row product-detail-headline">
                {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
            </div>
        {% endblock %}

        {# ... add short description #}
        {% block zen_page_product_detail_short_description %}
            {% if page.product.customFields.custom_description_small_description and theme_config('zen-product-details-short-description') %}
                <div class="product-detail-short-description">
                    {{ page.product.customFields.custom_description_small_description|trans|sw_sanitize }}
                </div>
            {% endif %}
        {% endblock %}

        {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
        </div>
    </div>
{% endblock %}