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

<div id="c4s-manufacturer-slider" class="mt-5 pt-5 border-top c4s-manufacturer-slider">
    <div class="text-center c4s-manufacturer-header">
        <h2 class="c4s-manufacturer-slider-title">{{ translate({ ident: "OUR_BRANDS" }) }}</h2>
        <div class="c4s-manufacturer-slider-subtitle">{{ translate({ ident: "MANUFACTURERSLIDER_SUBHEAD" }) }}</div>
    </div>

    <div id="c4s-manufacturer-swiper" class="mt-3 swiper">
        <div class="swiper-wrapper align-items-center">
            {% for oManufacturer in oView.getManufacturerForSlider() %}
                {% if oManufacturer.oxmanufacturers__oxicon.value %}
                    <div class="swiper-slide">
                        <div class="card border-0 align-items-center justify-content-center">
                            <a href="{{ oManufacturer.getLink()|raw }}" title="{{ translate({ ident: "VIEW_ALL_PRODUCTS" }) }}">
                                <img data-src="{{ oManufacturer.getIconUrl() }}"
                                     class="swiper-lazy img-fluid"
                                     alt="{{ oManufacturer.oxmanufacturers__oxtitle.value }}"
                                >
                                <div class="swiper-lazy-preloader"></div>
                            </a>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>