{# 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/promo_slider.min.js", priority: 11, dynamic: __oxid_include_dynamic }) }}

{% block widget_promoslider %}
    {% set oBannerList = oView.getBanners() %}
    {% set oCurrency = oView.getActCurrency() %}

    {% if not empty(oBannerList) and oBannerList.count() %}
        <div id="c4s-promo-swiper" class="swiper">
            <div class="swiper-wrapper align-items-center">
                {% block widget_promoslider_list %}
                    {% for iPicNr, oBanner in oBannerList %}
                        {% set oArticle = oBanner.getBannerArticle() %}
                        {% set sBannerPictureUrl = oBanner.getBannerPictureUrl() %}
                        {% if sBannerPictureUrl %}
                            {% block widget_promoslider_item %}
                                <div class="swiper-slide">
                                    {% set sBannerLink = oBanner.getBannerLink()|raw %}
                                    {% if sBannerLink %}
                                        <a href="{{ sBannerLink }}" title="{{ oBanner.oxactions__oxtitle.value }}">
                                    {% endif %}

                                        {% if oViewConf.getViewThemeParam("blSliderShowImageCaption") and oArticle %}
                                            <div class="d-none d-md-block p-4 c4s-article-caption">
                                                <div class="title">{{ oArticle.oxarticles__oxtitle.value }}</div>
                                                {% if oArticle.oxarticles__oxshortdesc.value|trim %}
                                                    <div class="description">{{ oArticle.oxarticles__oxshortdesc.value|trim }}</div>
                                                {% endif %}
                                            </div>
                                        {% endif %}

                                        <img data-src="{{ sBannerPictureUrl }}"
                                             class="swiper-lazy img-fluid w-100"
                                             alt="{{ oBanner.oxactions__oxtitle.value }}">
                                        <div class="swiper-lazy-preloader"></div>

                                    {% if sBannerLink %}
                                        </a>
                                    {% endif %}
                                </div>
                            {% endblock %}
                        {% endif %}
                    {% endfor %}
                {% endblock %}
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    {% endif %}
{% endblock %}