{% sw_extends '@Storefront/storefront/element/cms-element-image-gallery.html.twig' %}

{# preview normal menu #}
{% block element_image_gallery_inner_thumbnails_item_inner_spatial %}

    {% if image.hasExtension('preview') %}
        {% set preview = image.getExtension('preview') %}

        {% set attributes = attributes|merge({
            alt: (preview.translated.alt ?: fallbackImageTitle)
        }) %}

        {% if isProduct %}
            {% set attributes = attributes|merge({ itemprop: 'image' }) %}
        {% endif %}

        {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
            media: preview,
            sizes: {
                default: '200px'
            },
            attributes: attributes
        } %}
        <span class="badge bg-secondary m-1 position-absolute bottom-0 end-0">3D</span>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{# preview menu big #}
{% block element_image_gallery_inner_zoom_modal_thumbnails_item_inner_spatial %}

    {% if image.hasExtension('preview') %}
        {% set preview = image.getExtension('preview') %}

        {% set attributes = attributes|merge({
             class: attributes.class ~ ' js-load-img',
             alt: (preview.translated.alt ?: fallbackImageTitle)
         }) %}

         {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
             media: preview,
             sizes: {
                 default: '200px'
             },
             attributes: attributes,
             load: false
         } %}
         <span class="badge bg-secondary m-1 position-absolute bottom-0 end-0">3D</span>
     {% else %}
         {{ parent() }}
     {% endif %}
 {% endblock %}

{# loading background normal #}
{% block element_image_gallery_inner_item_spatial_loader %}

    {% if image.hasExtension('preview') %}
        <span class="badge bg-secondary m-3 position-absolute top-0 end-0 d-md-none">3D</span>

        {% set preview = image.getExtension('preview') %}

        {% set attributes = attributes|merge({
            class: attributes.class ~ ' magnifier-image js-magnifier-image opacity-25',
            alt: (preview.translated.alt ?: fallbackImageTitle),
            'data-full-image': preview.url,
            'tabindex': '0'
        }) %}

        {% if displayMode == 'cover' or displayMode == 'contain' %}
            {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
        {% endif %}

        {% if isProduct %}
            {% set attributes = attributes|merge({ itemprop: 'image' }) %}
        {% endif %}

        {% if loop.first %}
            {% set attributes = attributes|merge({ fetchpriority: 'high' }) %}
        {% endif %}

        {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
            media: preview,
            attributes: attributes
        } %}

        {% sw_include '@SwagPreviewGenerator/storefront/element/cms-element-image-gallery-loading-spinner.html.twig' %}
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{# loading background big #}
{% block element_image_gallery_inner_zoom_modal_slider_item_image_spatial %}

    {% if image.hasExtension('preview') %}
        {% set preview = image.getExtension('preview') %}

        {% set attributes = attributes|merge({
            class: attributes.class ~ ' js-image-zoom-element js-load-img opacity-25',
            alt: (preview.translated.alt ?: fallbackImageTitle),
            tabindex: "0"
        }) %}

        {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
            media: preview,
            attributes: attributes,
            load: false,
            loadOriginalImage: true,
            autoColumnSizes: false
        } %}

        {% sw_include '@SwagPreviewGenerator/storefront/element/cms-element-image-gallery-loading-spinner.html.twig' %}
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{% block element_image_gallery_inner_zoom_modal_slider_item_zoom_container_spatial_loader %}
    {% if image.hasExtension('preview') %}
        {% sw_include '@SwagPreviewGenerator/storefront/element/cms-element-image-gallery-loading-spinner.html.twig' %}
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{# loading background zoom #}
{% block element_image_gallery_inner_single_spatial_loader %}

    {% if image.hasExtension('preview') %}
        <span class="badge bg-secondary m-3 position-absolute top-0 end-0 d-md-none">3D</span>

        {% set preview = image.getExtension('preview') %}

        {% set attributes = attributes|merge({
            class: attributes.class ~ ' magnifier-image js-magnifier-image opacity-25',
            alt: (image.translated.alt ?: fallbackImageTitle),
            'tabindex': '0'
        }) %}

        {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
            media: preview,
            attributes: attributes,
        } %}

        {% sw_include '@SwagPreviewGenerator/storefront/element/cms-element-image-gallery-loading-spinner.html.twig' %}
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}