{% set variant = product|sylius_resolve_variant %}

{% if variant %}
    {% set hasDiscount = variant|sylius_has_discount({'channel': sylius.channel}) %}

    {% if hasDiscount %}
        <div class="product-box-tag">
            <span class="badge badge-secondary">{{ 'app.ui.product.tag.promo'|trans }}</span>
        </div>
    {% endif %}
{% 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'},
                            ]
                        },
                        {
                            'sizes' : '(max-width: 3488px) 100vw, 1920px',
                            'srcset':
                            [
                                {'width':'540', 'height': '540'},
                            ]
                        },
                    ]
                %}

                {{ 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'},
                        ]
                    },
                    {
                        'sizes' : '(max-width: 3488px) 100vw, 1920px',
                        'srcset':
                        [
                            {'width':'70', 'height': '70'},
                        ]
                    },
                ]
                %}

                {{ 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 %}
