{% if oActionList and oActionList.count() %}
    {# 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 %}

    {# own resources #}
    {{ style({ include: oViewConf.getVersionedModuleUrl("c4s_visual_cms_widgets", "out/src/css/c4s_banner_slider.css") }) }}
    {{ script({ include: oViewConf.getVersionedModuleUrl("c4s_visual_cms_widgets", "out/src/js/c4s_banner_slider.js"), priority: 11, dynamic: __oxid_include_dynamic }) }}

    <div class="row c4s-shortcode-{{ shortcode }} {{ class }}">
        {% if content and content|trim|length >= 12 %} {# toDo falls <p><br></p> auftaucht and content|count_characters >= 15 #}
            <div class="col-12 pb-4 c4s-banner-slider-text">
                {{ content|raw }}
            </div>
        {% endif %}

        {% if oActionList.count() > 1 %}
            <div class="col-12">
                <div class="swiper"
                     data-banner-slider="true"
                     data-banner-pagination="{% if showPagination %}true{% else %}false{% endif %}"
                >
                    <div class="align-items-center swiper-wrapper">
                        {% block c4s_widget_banner_slider_list %}
                            {% for oAction in oActionList %}
                                {% set oArticle = oAction.getBannerArticle() %}
                                {% set sBannerPictureUrl = oAction.getBannerPictureUrl() %}

                                {% if sBannerPictureUrl %}
                                    {% block c4s_widget_banner_slider_item %}
                                        <div class="swiper-slide position-relative">
                                            {% set sBannerLink = oAction.getBannerLink() %}

                                            {% if sBannerLink and not urlOnlyOnButton %}
                                                <a href="{{ sBannerLink }}" title="{{ oAction.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="{{ oAction.oxactions__oxtitle.value }}" />

                                                {% if sBannerLink and buttonText %}
                                                    <div class="c4s-banner-button-wrapper w-100 px-4 position-absolute bottom-0 mb-5 d-flex {{ buttonPosition }}">
                                                        {% if sBannerLink and urlOnlyOnButton %}
                                                            <a href="{{ sBannerLink }}"
                                                               title="{{ oAction.oxactions__oxtitle.value }}"
                                                               target="{{ buttonTarget }}"{% if buttonTarget == "_blank" %}
                                                               rel="noopener"{% endif %}
                                                            >
                                                        {% endif %}
                                                                <button type="button" class="btn" style="{% if buttonBg %}background-color:{{ buttonBg }}{% endif %};{% if buttonTextColor %}color:{{ buttonTextColor }};{% endif %}">
                                                                    {{ buttonText }}
                                                                </button>
                                                        {% if sBannerLink and urlOnlyOnButton %}
                                                            </a>
                                                        {% endif %}
                                                    </div>
                                                {% endif %}

                                                <div class="swiper-lazy-preloader"></div>

                                            {% if sBannerLink and not urlOnlyOnButton %}
                                                </a>
                                            {% endif %}
                                        </div>
                                    {% endblock %}
                                {% endif %}
                            {% endfor %}
                        {% endblock %}
                    </div>

                    {% if showPagination %}
                        <div class="swiper-pagination"></div>
                    {% endif %}

                    <div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
                    <div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
                </div>
            </div>
        {% else %}
            <div class="col-12">
                {% for oAction in oActionList %}
                    {% set oArticle = oAction.getBannerArticle() %}
                    {% set sBannerPictureUrl = oAction.getBannerPictureUrl() %}

                    {% if sBannerPictureUrl %}
                        {% set sBannerLink = oAction.getBannerLink() %}
                        {% if sBannerLink and not urlOnlyOnButton %}
                            <a href="{{ sBannerLink }}" title="{{ oAction.oxactions__oxtitle.value }}">
                        {% endif %}
                                <img src="{{ sBannerPictureUrl }}"
                                     class="img-fluid w-100" border="0"
                                     alt="{{ oAction.oxactions__oxtitle.value }}" />
                        {% if sBannerLink and not urlOnlyOnButton %}
                            </a>
                        {% endif %}

                        {% if sBannerLink and buttonText %}
                            <div class="c4s-banner-button-wrapper px-4 w-100 position-absolute bottom-0 mb-5 d-flex {{ buttonPosition }}">
                                {% if sBannerLink and urlOnlyOnButton %}
                                    <a
                                        href="{{ sBannerLink }}" title="{{ oAction.oxactions__oxtitle.value }}"
                                        target="{{ buttonTarget }}"{% if buttonTarget == "_blank" %}
                                        rel="noopener"{% endif %}
                                    >
                                {% endif %}
                                        <button type="button" class="btn" style="{% if buttonBg %}background-color:{{ buttonBg }}{% endif %};{% if buttonTextColor %}color:{{ buttonTextColor }};{% endif %}">
                                            {{ buttonText }}
                                        </button>
                                {% if sBannerLink and urlOnlyOnButton %}
                                    </a>
                                {% endif %}
                            </div>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </div>
        {% endif %}
    </div>
{% endif %}