{% sw_extends '@SwagCommerical/storefront/element/cms-element-spatial-viewer.html.twig' %}

{% block spatial_cms_viewer_element_canvas_loading_spinner %}

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

        {% set attributes = {
            class: attributes.class ~ ' position-absolute top-50 start-50 translate-middle h-100 opacity-25',
            alt: preview.translated.alt,
            tabindex: "0",
            'data-object-fit' : "contain",
            itemprop : "image",
            fetchpriority : "high",
        } %}

        <div class="spatial-canvas-spinner position-absolute overflow-hidden w-100 h-100" >

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

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