{% block moorl_foundation_listing %}
    {% if not config %}
        {% set config = element.fieldConfig.elements %}
    {% endif %}
    {% if not config %}
        {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
            type: 'danger',
            content: 'moorl-foundation.search.missingConfiguration'|trans|sw_sanitize
        } %}
    {% endif %}

    {# Set listing title by a page entity #}
    {% set listingHeaderTitle = listingHeaderTitle ?? element.translated.config.listingHeaderTitle.value %}

    {% set itemCss = [
        "padding:#{config.itemPadding.value}",
        "background-color:#{config.itemBackgroundColor.value}",
        "height:#{config.itemHeight.value}",
        "--content-highlight-color:#{config.contentHighlightColor.value}",
        "--content-background-color:#{config.contentBackgroundColor.value}",
        "--content-color:#{config.contentColor.value}",
    ] %}
    {% set contentCss = [
        "padding:#{config.contentPadding.value}",
        "background-color:#{config.contentBackgroundColor.value}",
        "color:#{config.contentColor.value}",
        "text-align:#{config.textAlign.value}",
    ] %}

    {% set listingCss = [] %}
    {% if config.listingLayout.value == 'grid' %}
        {% set listingCss = listingCss|merge([
            "grid-template-columns:repeat(auto-fit, minmax(#{config.itemWidth.value}, 1fr))",
            "grid-gap:#{config.gapSize.value}",
        ]) %}
    {% elseif config.listingLayout.value == 'list' %}
        {% set listingCss = listingCss|merge([
            "grid-gap:#{config.gapSize.value}",
        ]) %}
    {% elseif config.listingLayout.value == 'slider' %}
        {% set listingCss = listingCss|merge([
            "height:#{config.itemHeight.value}",
        ]) %}
    {% elseif config.listingLayout.value == 'standard' %}
        {% set itemCss = itemCss|merge([
            "height:#{config.itemHeight.value}",
        ]) %}
        {% set listingCss = listingCss|merge([
            "justify-content:#{config.listingJustifyContent.value}",
        ]) %}
    {% endif %}

    {% set listingContent %}
        {% if config.listingLayout.value == 'standard' %}
            {% set listingColumns = 'cms-listing-col col-sm-6 col-lg-4 col-xl-3' %}

            {% if section and section.type == 'sidebar' %}
                {% set listingColumns = 'cms-listing-col col-sm-6 col-lg-6 col-xl-4' %}
            {% endif %}
        {% else %}
            {% set listingColumns = null %}
        {% endif %}

        {% for item in searchResult %}
            {% block moorl_foundation_listing_item %}
                {% sw_include '@MoorlFoundation/plugin/moorl-foundation/listing-item.html.twig' %}
            {% endblock %}
        {% endfor %}
    {% endset %}

    <div class="cms-element-moorl-listing">
        {% if listingHeaderTitle %}
            <div class="h2 moorl-listing-header-title">
                {{ listingHeaderTitle }}
            </div>
        {% endif %}

        {% if listingHeaderLink %}
            <div class="moorl-listing-header-link">
                <a class=""
                   href="{{ listingHeaderLink }}"
                   title="{{ "moorl-foundation.search.moreButton"|trans }}">
                    {{ "moorl-foundation.search.moreButton"|trans }}
                </a>
            </div>
        {% endif %}

        {% if config.listingLayout.value == 'slider' %}
            {# Note: Tiny Slider breaks if the parent element is display: grid with fr based template columns #}
            {% set listingCss = listingCss|merge([
                "margin-right:-#{config.gapSize.value}",
            ]) %}

            {% set productSliderOptions = {
                productboxMinWidth: config.itemWidth.value,
                slider: {
                    navPosition: 'bottom',
                    speed: config.speed.value ?: 400,
                    autoplay: config.autoplay.value ? true : false,
                    autoplayHoverPause: config.autoplayHoverPause.value ? true : false,
                    autoplayTimeout: config.autoplayTimeout.value ?: 3500,
                    mode: config.mode.value ? config.mode.value : "carousel",
                    gutter: (config.gapSize.value|number_format * 1),
                    animateIn: config.mode.value == 'gallery' ? config.animateIn.value ?: null,
                    animateOut: config.mode.value == 'gallery' ? config.animateOut.value ?: null,
                    nav: config.navigationDots.value ? true : false,
                    controls: config.navigationArrows.value ? true : false,
                    mouseDrag: config.mouseDrag.value ? true : false,
                    autoplayButtonOutput: false,
                    swipeAngle: false,
                    autoHeight: false,
                    autoplayButtonOutput: false,
                    navAsThumbnails: config.navigationDots.value == 'thumbnails' ? true : false,
                    navContainer: config.navigationDots.value == 'thumbnails' ? "#thumbnails#{element.id}" : null
                }
            } %}

            {% set sliderClasses = ['base-slider','moorl-slider','product-slider'] %}
            {% set controlsPrevClasses = ['base-slider-controls-prev','image-slider-controls-prev'] %}
            {% set controlsNextClasses = ['base-slider-controls-next','image-slider-controls-next'] %}
            {% if config.navigationArrows.value == "outside" %}
                {% set sliderClasses = sliderClasses|merge(['has-nav-outside']) %}
                {% set controlsPrevClasses = controlsPrevClasses|merge(['is-nav-prev-outside']) %}
                {% set controlsNextClasses = controlsNextClasses|merge(['is-nav-next-outside']) %}
            {% elseif config.navigationArrows.value == "inside" %}
                {% set controlsPrevClasses = controlsPrevClasses|merge(['is-nav-prev-inside']) %}
                {% set controlsNextClasses = controlsNextClasses|merge(['is-nav-next-inside']) %}
            {% endif %}
            {% if config.navigationDots.value == "outside" %}
                {% set sliderClasses = sliderClasses|merge(['has-dots-outside']) %}
            {% endif %}

            <div class="{{ sliderClasses|join(' ') }}"
                 data-product-slider="true"
                 data-product-slider-options='{{ productSliderOptions|json_encode }}'>
                <ul class="moorl-listing-slider"
                    style="{{ listingCss|join(';')|raw }}"
                    data-product-slider-container="true">
                    {{ listingContent }}
                </ul>

                {% if config.navigationDots.value == "thumbnails" %}
                    <div class="moorl-listing-slider-thumbnails" style="margin-top: {{ config.gapSize.value }}">
                        {% block moorl_foundation_listing_slider_thumbnails %}
                            <ul id="thumbnails{{ element.id }}">
                                {% for item in searchResult %}
                                    <li>
                                        {% block moorl_foundation_listing_slider_thumbnails_item %}
                                            {% sw_thumbnails 'moorl-listing-slider-thumbnail' with {
                                                media: item.media,
                                                attributes: {alt: '',title: ''}
                                            } %}
                                        {% endblock %}
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endblock %}
                    </div>
                {% endif %}

                {% if config.navigationArrows.value %}
                    <div class="">
                        <div class="base-slider-controls"
                             data-product-slider-controls="true">
                            <button class="{{ controlsPrevClasses|join(' ') }}">
                                {% block moorl_foundation_listing_slider_controls_items_prev_icon %}
                                    {% sw_icon 'arrow-head-left' %}
                                {% endblock %}
                            </button>
                            <button class="{{ controlsNextClasses|join(' ') }}">
                                {% block moorl_foundation_listing_slider_controls_items_next_icon %}
                                    {% sw_icon 'arrow-head-right' %}
                                {% endblock %}
                            </button>
                        </div>
                    </div>
                {% endif %}
            </div>
        {% elseif config.listingLayout.value == 'standard' %}
            <ul class="row cms-listing-row js-listing-wrapper moorl-listing-standard"
                style="{{ listingCss|join(';')|raw }}">
                {{ listingContent }}
            </ul>
        {% elseif config.listingLayout.value == 'search-suggest' %}
            <ul class="moorl-search-suggest-list">
                {{ listingContent }}
            </ul>
        {% else %}
            <ul class="js-listing-wrapper moorl-listing-{{ config.listingLayout.value }}"
                style="{{ listingCss|join(';')|raw }}">
                {{ listingContent }}
            </ul>
        {% endif %}
    </div>
{% endblock %}