{% if mobile %}

    {% if topsearch is not empty %}
        <ul class="overflow-x-scroll whitespace-nowrap hidden-scrollbar mb-4 -mx-4">
            {% for item in topsearch %}
            <li class="inline-block mr-2 first:pl-4">
                <a class="tab-control select-none flex gap-2 items-center rounded-full px-6 h-10 py-2 text-sm font-semibold border bg-slate-100 text-slate-900 border-slate-300" href="{{item.url}}">{{item.label}}</a>
            </li>
            {% endfor %}
        </ul>
    {% endif %}

{% else %}
    {% if topsearch is not empty and topsearch|length >= 6  %}
        <style>
            .no-scrollbar::-webkit-scrollbar {
                display: none;
            }
            .no-scrollbar {
                -ms-overflow-style: none;  /* IE and Edge */
                scrollbar-width: none;  /* Firefox */
            }
            ul.smooth-x {
                transition: scroll-behavior 0.5s ease-in-out;
            }
        </style>

        <div x-data="{ scrollLeft() { $refs.slider.scrollBy({left: -400, behavior: 'smooth'}); }, scrollRight() { $refs.slider.scrollBy({left: 400, behavior: 'smooth'}); } }" class="relative w-full boxed">
            <button @click="scrollLeft" class="absolute left-0 top-0 bottom-0 z-10 bg-white text-slate-300 hover:text-primary pr-2 h-full flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
                </svg>                        
            </button>


            <div class="overflow-hidden mb-4">
                <ul class="smooth-x pl-8 pr-4 whitespace-nowrap flex overflow-x-auto no-scrollbar transition-all duration-500 ease-in-out" x-ref="slider">
                    {% for item in topsearch %}
                    <li class="inline-block mr-2 last:pr-8">
                        <a class="tab-control select-none mr-2 flex gap-2 items-center rounded-full px-6 h-10 py-2 text-sm font-semibold border hover:cursor-pointer hover:bg-slate-200 text-slate-900 border-slate-300" href="{{item.url}}">{{item.label}}</a>
                    </li>
                    {% endfor %}
                </ul>
            </div>


            <button @click="scrollRight" class="absolute right-0 top-0 bottom-0 z-10 bg-white text-slate-300 hover:text-primary px-2 h-full flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                </svg>            
            </button>
        </div>
    {% else %}

        <ul class="smooth-x mb-4 whitespace-nowrap flex overflow-x-auto no-scrollbar transition-all duration-500 ease-in-out" x-ref="slider">
            {% for item in topsearch %}
            <li class="inline-block mr-2">
                <a class="tab-control select-none mr-2 flex gap-2 items-center rounded-full px-6 h-10 py-2 text-sm font-semibold border hover:cursor-pointer hover:bg-slate-200 text-slate-900 border-slate-300" href="{{item.url}}">{{item.label}}</a>
            </li>
            {% endfor %}
        </ul>

    {% endif %}


{% endif %}