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

<div class="product-box-tag">
    {% if hasDiscount %}
        <span class="badge badge-secondary">{{ 'app.ui.product.tag.promo'|trans }}</span>
    {% endif %}
</div>

<div class="product-show-images-slider" 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 }}" 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': '305'},
                            ]
                        },
                        {
                            'sizes' : '(max-width: 3488px) 100vw, 1920px',
                            'srcset':
                            [
                                {'width':'540', 'height': '404'},
                            ]
                        },
                    ]
                %}

                {{ 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">
        {% 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>
                {% if product.isConfigurable() and product.variants|length > 0 %}
                    {% include '@SyliusShop/Product/Show/_imageVariants.html.twig' %}
                {% endif %}
                <img data-lazy="{{ path }}" class="img-fluid" data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}" alt="{{ product.name }}" />
            </div>
        {% endfor %}
    </div>
{% endif %}
