@can($permission)
    <div x-data="{ open: false }" class="relative inline-flex">
        <a href="{{ $route }}"
            class="inline-flex items-center gap-1 sm:gap-1.5 md:gap-2 px-2 py-2
                rounded-lg shadow-sm
                font-semibold text-blue-700
                border border-blue-700
                hover:bg-blue-700 hover:text-white
                focus:outline-none focus:ring-2 focus:ring-blue-400"
            aria-label="Add">

            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
            </svg>

            <span>Add</span>
        </a>
    </div>
@endcan