{% set variant = product|sylius_resolve_variant %}

{% if variant %}
    {% set appliedPromotions = variant.getAppliedPromotionsForChannel(sylius.channel) %}

    {% include '@SyliusShop/Product/Show/_catalogPromotionLabels.html.twig' with {'appliedPromotions': appliedPromotions, 'withDescription': false} %}
{% endif %}

<div class="product-show-images-slider slick-thumbnails" data-js-product-thumbnail data-lightbox-label="{{ 'sylius.lightbox.image_album_label'|trans }}">
    {% for image in product.images %}
        {% set path = image.path is not null ? image.path : '//placehold.it/400x300' %}
        <div>
            {% if product.isConfigurable() and product.variants|length > 0 %}
                {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
            {% endif %}
            <a href="{{ image.path|imagine_filter('sylius_shop_product_original')}}" data-js-product-image data-lightbox="sylius-product-image" data-title="{{ product.name }}">
                {%  set runtimeConfigurationImage = [
                        {
                            'media': '(max-width: 489px)',
                            'sizes' : '(max-width: 980px) 100vw, 490px',
                            'srcset':
                            [
                                {
                                    'width':'460',
                                    'height': '460',
                                    'filter_set': 'shop_product_detail_small',
                                },
                            ]
                        },
                        {
                            'sizes' : '(max-width: 3488px) 100vw, 1920px',
                            'srcset':
                            [
                                {
                                    'width':'540',
                                    'height': '540',
                                    'filter_set': 'shop_product_detail_big',
                                },
                            ]
                        },
                    ]
                %}

                {{ dedi_sylius_image_optimizer_for_image(path, product.name, {
                        'class' : 'w-100'
                    },
                    runtimeConfigurationImage
                ) }}
            </a>
        </div>
    {% endfor %}
</div>
{% if product.images|length > 1 %}
    {{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }}
    <div class="product-show-images-thumbnail slick-thumbnails-dots">
        {% for image in product.images %}
            {% set path = image.path is not null ? image.path|imagine_filter('sylius_shop_product_small_thumbnail') : '//placehold.it/200x200' %}
            <div class="slick-dot">
                {% if product.isConfigurable() and product.variants|length > 0 %}
                    {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
                {% endif %}

                {%  set runtimeConfigurationImage = [
                    {
                        'media': '(max-width: 489px)',
                        'sizes' : '(max-width: 980px) 100vw, 490px',
                        'srcset':
                        [
                            {
                                'width':'45',
                                'height': '45',
                                'filter_set': 'shop_product_detail_thubmnail_small',
                            },
                        ]
                    },
                    {
                        'sizes' : '(max-width: 3488px) 100vw, 1920px',
                        'srcset':
                        [
                            {
                                'width':'70',
                                'height': '70',
                                'filter_set': 'shop_product_detail_thubmnail_big',
                            },
                        ]
                    },
                ]
                %}

                {{ dedi_sylius_image_optimizer_for_image(image.path, product.name, {
                    'class' : 'img-fluid',
                    'data-large-thumbnail': image.path|imagine_filter('sylius_shop_product_large_thumbnail')
                },
                    runtimeConfigurationImage
                ) }}
            </div>
        {% endfor %}
    </div>
{% endif %}
