{% block element_bc_brand_slider %}
    {% set config = element.translated.config %}

	{% set title = config.title.value %}
	{% set description = config.description.value %}
	{% set brands = element.data.brands.elements %}
	{% set headingColor = config.headingColor.value %}
	{% set descriptionColor = config.descriptionColor.value %}

    <div class="cms-element-{{ element.type }}">
        {% block element_bc_brand_slider_slider %}

            {% if brands|length > 0 %}
                {% set hasNavigationArrows = element.config.enableArrowControls.value %}
                {% set brandSliderOptionsSlider = {
                    controls: hasNavigationArrows,
                    nav: false,
                    mouseDrag: true,
                    autoplay: false,
                    autoplayButtonOutput: false,
                    gutter: 20,
                    loop: true,
                    rewind: true,
                    responsive: {
                        "0": { items: 1 },
                        "480": { items: 2 },
                        "600": { items: 2 },
                        "800": { items: 3 },
                        "1000": { items: 4 },
                        "1200": { items: 5 },
                        "1400": { items: 5 },
                    },
                }%}

                {% set brandSliderOptions = {
                    sliderConfig: brandSliderOptionsSlider
                } %}

                <div
                    class="base-slider bc-brand-slider"
                    data-bc-aqua-brand-slider="true"
                    data-bc-aqua-brand-slider-options="{{ brandSliderOptions|json_encode }}"
                >
                    {% block element_bc_brand_slider_content %}
                        <div class="content">
                            {% block element_bc_brand_slider_title %}
                                {% if title %}
                                    <div class="title" style="color:{{ headingColor }};">{{ title }}</div>
                                {% endif %}
                            {% endblock %}
                            {% block element_bc_brand_slider_description %}
                                {% if description %}
                                    <p style="color: {{ descriptionColor }};"> {{ description }}</p>
                                {% endif %}
                            {% endblock %}
                        </div>
                    {% endblock %}

                    {% block element_bc_brand_slider_inner %}
                    <div class="bc-brand-slider-inner">
                        {% block element_bc_brand_slider_element %}
                            <div class="bc-brand-slider-container"
                                 data-bc-brand-slider-container="true">
                                {% for brand in brands %}
                                    {% block element_bc_brand_slider_inner_item %}
                                        <div class="bc-brand-slider-item">
                                            {% if brand.media %}
                                                {% set attributes = {
                                                    'height':'120',
                                                    'width':'180',
                                                    'alt': (brand.media.translated.alt ?: brand.name),
                                                    'title': (brand.media.translated.title ?: brand.name)
                                                } %}
                                                {% sw_thumbnails 'product-manufacturer-image-thumbnails' with {
                                                    media: brand.media,
                                                    attributes: attributes,
                                                    sizes: {
                                                        'xs': '575px',
                                                        'sm': '767px',
                                                        'md': '991px',
                                                        'lg': '1199px',
                                                        'xl': '1360px'
                                                    },
                                                } %}
                                            {% else %}
                                                <img src="{{ asset('/storefront/assets/images/widgetImages/noImageHersteller.png','@BrandCrockAquaTheme' ) }}" title="{{ brand.name }}" alt="{{ brand.name }}" width="180" height="120" />
                                            {% endif %}
                                        </div>
                                    {% endblock %}
                                {% endfor %}
                            </div>
                        {% endblock %} 
                        {% block element_bc_brand_slider_controls %}
                            {% if hasNavigationArrows %}
                                <div class="bc-brand-slider-controls-container">
                                    <div class="base-slider-controls"
                                      data-bc-brand-slider-controls="true"
                                      role="navigation">
                                        {% block element_bc_category_boxes_controls_items %}
                                            <button
                                                class="base-slider-controls-prev bc-brand-slider-controls-prev is-nav-prev-{{ sliderConfig.navigationArrows.value }}{% if sliderConfig.border.value %} has-border{% endif %}"
                                                aria-label="{{ 'general.previous'|trans|striptags }}">
                                                {% block element_bc_category_boxes_controls_items_prev_icon %}
                                                    {% sw_icon 'arrow-head-left' %}
                                                {% endblock %}
                                            </button>
                                            <button
                                                class="base-slider-controls-next bc-brand-slider-controls-next is-nav-next-{{ sliderConfig.navigationArrows.value }}{% if sliderConfig.border.value %} has-border{% endif %}"
                                                aria-label="{{ 'general.next'|trans|striptags }}">
                                                {% block element_bc_category_boxes_controls_items_next_icon %}
                                                    {% sw_icon 'arrow-head-right' %}
                                                {% endblock %}
                                            </button>
                                        {% endblock %}
                                    </div>
                                </div>
                            {% endif %}
                        {% endblock %}
                        </div>
                    {% endblock %}
                </div>
            {% endif %}
        {% endblock %}
    </div>
{% endblock %}