<div class="border-b border-gray-200 dark:border-white/10 pb-5 sm:pb-0">
    <div class="mt-3 {{ title ? 'sm:mt-4' : '' }}">
        <div class="grid grid-cols-1 sm:hidden">
            <select x-data="" aria-label="Select a tab" @change="window.location.href = $event.target.value" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 py-2 pr-8 pl-3 text-base text-gray-900 dark:text-white outline-1 -outline-offset-1 outline-gray-300 dark:outline-white/10 *:bg-gray-800 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-500">
                {% for item in items %}
                    <option value="{{ item.url }}" {{ item.active ? 'selected' : '' }}>
                        {{ item.name }}
                    </option>
                {% endfor %}
            </select>
            <twig:ux:icon name="lucide:chevron-down" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-400" />
        </div>
        <div class="hidden sm:block">
            {% set lucide = {
                'lucide:user': '<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
                'lucide:users': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>',
                'lucide:lock-keyhole': '<circle cx="12" cy="16" r="1"/><rect x="3" y="10" width="18" height="12" rx="2"/><path d="M7 10V7a5 5 0 0 1 10 0v3"/>',
                'lucide:fingerprint': '<path d="M2 12a10 10 0 0 1 18-6"/><path d="M2 16h.01"/><path d="M21.8 16c.2-2 .131-5.354 0-6"/><path d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"/><path d="M8.65 22c.21-.66.45-1.32.57-2"/><path d="M9 6.8a6 6 0 0 1 9 5.2v2"/><path d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/>',
                'lucide:trash-2': '<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>',
                'lucide:clipboard-check': '<rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="m9 14 2 2 4-4"/>',
                'lucide:credit-card': '<rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/>',
                'lucide:calendar-clock': '<path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"/><path d="M16 2v4"/><path d="M8 2v4"/><path d="M3 10h5"/><path d="M17.5 17.5 16 16.25V14"/><circle cx="16" cy="16" r="6"/>',
                'lucide:history': '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/>',
                'lucide:circle-x': '<circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/>',
                'lucide:circle': '<circle cx="12" cy="12" r="10"/>'
            } %}
            <nav class="-mb-px flex space-x-8">
                {% for item in items %}
                    <a href="{{ item.url }}"
                       class="group inline-flex items-center gap-2 border-b-2 {{ item.active ? 'border-primary-700 text-primary-700' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-white/20 dark:hover:text-white' }} px-1 pb-4 text-sm font-medium whitespace-nowrap"
                       {{ item.active ? 'aria-current="page"' : '' }}>
                        {% if item.icon|default and lucide[item.icon] is defined %}
                            <svg class="size-4 {{ item.active ? 'text-primary-700' : 'text-gray-400 group-hover:text-gray-500 dark:text-gray-500' }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">{{ lucide[item.icon]|raw }}</svg>
                        {% endif %}
                        {{ item.name }}
                    </a>
                {% endfor %}
            </nav>
        </div>
    </div>
</div>
