
{% block element_bc_category_boxes %}
    {% set categories = element.data.categories.elements %}
    {% set backgroundColor = element.config.backgroundColor.value %}
    {% set foregroundColor = element.config.foregroundColor.value %}
    {% set borderColor = element.config.borderColor.value %}
    {% set cardLayout = element.config.cardLayout.value %}

    <div class="cms-element-{{ element.type }} col-12" data-cms-element-id="{{ element.id }}">
        {% block element_bc_category_boxes_slider %}
            {% if categories|length > 0 %}
                {% set hasNavigationArrows = element.config.enableArrowControls.value %}
                {% set categoryBoxSliderOptionsSlider = {
                    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 categorySliderOptions = {
                    sliderConfig: categoryBoxSliderOptionsSlider
                } %}

                <div class="bc-category-boxes" data-bc-aqua-category-boxes="true" data-bc-aqua-category-boxes-options="{{ categorySliderOptions|json_encode }}">
                    {% block element_bc_category_boxes_inner %}
                        {% block element_bc_category_boxes_element %}
                            <div class="bc-category-boxes-container" data-bc-category-boxes-container="true">
                                {% set categoryBoxesMediaId = [] %}

                                {% for key,category in categories %}
                                    {% set categoryMediaId = category.translated.customFields.bc_aqua_category_box_image %}

                                    {% if categoryMediaId %}
                                        {% set categoryBoxesMediaId = categoryBoxesMediaId|merge([categoryMediaId]) %}  
                                    {% endif %}
                                {% endfor %}

                                {% set categoryBoxesMedia = searchMedia(categoryBoxesMediaId, context.context) %}

                                {% for key,category in categories %}
                                    {% set itemCount = category.extensions.bcProductCount ?: 0 %}

                                    {% set categoryName = category.translated.name %}
                                    {% set categoryImageId = category.translated.customFields.bc_aqua_category_box_image %}
                                    {% set id = category.id %}
                                    {% set name = category.translated.name %}
                                    {% set link = category_url(category) %}

                                    {% if categoryImageId %}
                                        {% set categoryImageEntity = categoryBoxesMedia.get(categoryImageId) %}
                                    {% endif %}

                                    <div class="item">
                                        <a href="{{ link|e }}"
                                            itemprop="url"
                                            {% if category.translated.linkNewTab %}target="_blank"{% endif %}
                                            {% if category.translated.linkType == "external" %}rel="noopener noreferrer"{% endif %}
                                            title="{{ name|e }}">
                                            <div
                                                class="category--box {% if cardLayout %}{{ cardLayout }} {% else %} box {% endif %}"
                                                style="--bc-aqua-category-bg: {{ backgroundColor ?: '#c59e43' }};
                                                    --bc-aqua-category-border: {{ borderColor ?: 'black' }};
                                                    --bc-aqua-category-color: {{ foregroundColor }};"
                                                >
                                                {% if categoryImageEntity %}
                                                    {% set attributes = {
                                                        'height':'120',
                                                        'width' : '120',
                                                        'alt': (categoryImageEntity.translated.alt ?: categoryName),
                                                        'title': (categoryImageEntity.translated.title ?: categoryName)
                                                    } %}

                                                    {% sw_thumbnails 'product-manufacturer-image-thumbnails' with {
                                                        media: categoryImageEntity,
                                                        attributes: attributes,
                                                        sizes: {
                                                            'xs': '575px',
                                                            'sm': '767px',
                                                            'md': '331px',
                                                            'lg': '400px',
                                                            'xl': '454px'
                                                        },
                                                    } %}
                                                {% else %}
                                                    <img src="{{ asset('/storefront/assets/images/widgetImages/noImage.png', '@BrandCrockAquaTheme' ) }}" alt="{{name}}" width="120" height="120" />
                                                {% endif %}

                                                {% if categoryName %}
                                                    <span style="color: {{foregroundColor}};" >{{categoryName}}</span>
                                                    <label style="color: {{foregroundColor}};">({{itemCount}} {{ "BrandCrockAquaTheme.elements.category-boxes.itemsLabel"|trans }})</label>
                                                {% endif %}
                                            </div>
                                        </a>
                                    </div>

                                    {% set categoryImageEntity = null %}
                                {% endfor %}
                            </div>
                        {% endblock %}
                        {% block element_bc_category_boxes_controls %}
                            {% if hasNavigationArrows %}
                                    <div class="base-slider-controls"
                                      data-bc-category-boxes-controls="true"
                                      role="navigation">
                                        {% block element_bc_category_boxes_controls_items %}
                                            <button
                                                class="base-slider-controls-prev bc-category-boxes-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-category-boxes-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>
                            {% endif %}
                        {% endblock %}
                    {% endblock %}
                </div>
            {% endif %}
        {% endblock %}
    </div>
{% endblock %}
