{% if product.imagesByType('main') is not empty %}
    {% set source_path = product.imagesByType('main').first.path %}
    {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
    {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
{% elseif product.images.first %}
    {% set source_path = product.images.first.path %}
    {% set original_path = source_path|imagine_filter('sylius_shop_product_original') %}
    {% set path = source_path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) %}
{% else %}
    {% set original_path = '//placehold.it/400x300' %}
    {% set path = original_path %}
{% endif %}

<div data-product-image="{{ path }}" data-product-link="{{ original_path }}"></div>

<a href="{{ original_path }}" class="glightbox d-block w-100" data-js-product-image>
    <img class="img-fluid w-100 rounded-3 border border-light" src="{{ path }}" alt="{{ product.name }}" {{ sylius_test_html_attribute('main-image') }}/>
</a>

{% if product.images|length > 1 %}

    {{ sylius_template_event('sylius.shop.product.show.before_thumbnails', {'product': product}) }}

    <div class="grid gap-2 mt-2">
        {% 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="g-col-12 g-col-md-4 g-col-lg-3" data-js-product-thumbnail>
                {% 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') }}" class="glightbox">
                    <img
                        class="img-fluid w-100 rounded-3 border border-light"
                        src="{{ path }}"
                        data-large-thumbnail="{{ image.path|imagine_filter('sylius_shop_product_large_thumbnail') }}"
                        alt="{{ product.name }}"
                    />
                </a>
            </div>
        {% endfor %}
    </div>
{% endif %}