{% if results %}
    <div class="!absolute bg-white border border-base-200 flex flex-col max-h-80 leading-none left-0 mt-12 py-1 right-0 rounded-default top-0 shadow-xs z-10 dark:bg-base-800 dark:border-base-700" data-simplebar>
        {% for item in results %}
            <div class="mx-1">
                <a href="{{ item.link }}"
                   class="block items-center px-3 py-2 rounded-default truncate"
                   x-on:mouseenter="currentIndex = {{ forloop.counter }}"
                   x-bind:class="{'bg-base-100 text-base-700 dark:bg-base-700 dark:text-base-200': currentIndex === {{ forloop.counter }}}">
                    {{ item.title }} <span class="text-font-subtle-light mx-1 dark:text-font-subtle-dark">/</span> {{ item.description }}
                </a>
            </div>
        {% endfor %}
    </div>
{% endif %}