{% if mobile %}

    <div class="overflow-x-scroll whitespace-nowrap  hidden-scrollbar pl-4 lg:p-0 {{type == 'home' ? 'mx-0' : '-mx-4'}}  lg:mx-0 my-4">
        {% for card in loop %}
        <div class="inline-block align-top mr-4 w-[280px]">
            {% include 'templates/components/cards/'~ component ~'.twig' %}
        </div>
        {% endfor %}
        {% if showmore %}
        <div class="inline-block align-top mr-4">
            <div class="rounded-xl flex items-center justify-center h-full bg-slate-50 px-12">
                <div class="invisible w-0">
                    {% include 'templates/components/cards/'~ component ~'.twig' %}
                </div>
                <a href="{{showmore_link}}" class="text-slate-500 flex items-center justify-center">
                    <div class="text-center text-slate-400 hover:text-slate-500">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="h-8 w-8 mx-auto mb-2" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                        </svg>
                        <span>vedi tutto</span>
                    </div>
                </a>
            </div>
        </div>
        {% endif %}
    </div>

{% else %}
    <div class="relative">
        <div id="slider_{{slider_id}}" class="swiper">
            <div class="swiper-wrapper relative">
            {% for card in loop %}
                <div class="swiper-slide select-none">
                    {% include 'templates/components/cards/'~ component ~'.twig' %}
                </div>
            {% endfor %}
            {% if showmore %}
                <div class="swiper-slide rounded-xl flex items-center justify-center h-full min-h-full bg-slate-700">
                    <div class="invisible w-0">
                        {% include 'templates/components/cards/'~ component ~'.twig' %}
                    </div>
                    <a href="{{showmore_link}}" class="text-slate-500 flex items-center justify-center">
                        <div class="text-center text-slate-400 hover:text-slate-500">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="h-8 w-8 mx-auto mb-2" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                            </svg>
                            <span>vedi tutto</span>
                        </div>
                    </a>
                </div>
            {% endif %}
            </div>
        </div>
        {% if pagination %}
        <div class="swiper-pagination swiper-pagination_{{slider_id}}"></div>
        {% endif %}
    </div>

    <script>
    (function (){
        var slides_per_view = '{{slides_per_view}}';
        var swiper = new Swiper('#slider_{{slider_id}}', {

        loop: false,
        speed: 400,
        spaceBetween: 24,
        slidesPerView: 6,
        breakpoints: {
            320: {
            slidesPerView: 1,
            },
            // when window width is >= 640px
            640: {
            slidesPerView: 3,
            },
            980: {
            slidesPerView: slides_per_view,
            }
        },
        navigation: {
            nextEl: '#slidenext_{{slider_id}}',
            prevEl: '#slideback_{{slider_id}}',
        },
        pagination: {
            el: '.swiper-pagination_{{slider_id}}',
        },

        });
    })();
    </script>
    
{% endif %}