{% 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|imagine_filter('sylius_shop_product_large_thumbnail') : '//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 }}">
                <img data-lazy="{{ path }}" class="w-100" alt="{{ product.name }}" />
            </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 %}
