{# external resources #}
{% if oViewConf.getViewThemeParam("blUseCDN") %}
    {{ style({ include: "https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.4/swiper-bundle.min.css" }) }}
    {{ script({ include: "https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.4/swiper-bundle.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
{% else %}
    {{ style({ include: "libs/swiper/css/swiper-bundle.min.css" }) }}
    {{ script({ include: "libs/swiper/js/swiper-bundle.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
{% endif %}

{{ script({ include: "js/details_picture_slider.min.js", priority: 11, dynamic: __oxid_include_dynamic }) }}

{% if oView.morePics() %}
    {% set iMorePics = oView.getIcons()|length %}

    <div id="c4s-details-more-pictures-swiper" class="mb-3 swiper c4s-details-more-pictures-swiper">
        <div class="swiper-wrapper justify-content-center">
            {% for iPicNr, oArtIcon in oView.getIcons() %}
                {% set sPictureName = oPictureProduct.getPictureFieldValue("oxpic", iPicNr) %}
                {% set aPictureInfo = oPictureProduct.getMasterPicturePath("product/" ~ iPicNr ~ "/" ~ sPictureName)|getimagesize %}
                <div class="swiper-slide">
                    <a class="{% if loop.first %} selected{% endif %}"
                       href="{{ oPictureProduct.getPictureUrl(iPicNr) }}"
                       data-num="{{ loop.index }}"
                       {% if aPictureInfo %}
                           data-width="{{ aPictureInfo.0 }}"
                           data-height="{{ aPictureInfo.1 }}"
                       {% endif %}
                       data-zoom-url="{{ oPictureProduct.getMasterZoomPictureUrl(iPicNr) }}"
                    >
                        <img data-src="{{ oPictureProduct.getIconUrl(iPicNr) }}"
                             class="swiper-lazy img-fluid"
                             alt="additional picture {{ loop.index }}"
                        >
                        <div class="swiper-lazy-preloader"></div>
                    </a>
                </div>
            {% endfor %}
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
{% endif %}