<div class="flex items-center space-x-1 shadow-[0px_4px_6px_0px_rgba(0,_0,_0,_0.1)] rounded-md p-1 w-fit mx-auto my-12">
    @if ($paginator->onFirstPage())
        <span
            class="h-8 w-8 flex items-center justify-center rounded-md hover:bg-[#12b7b6] transition-colors text-gray-400 not-allowed-cursor"
            aria-disabled="true">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
            </svg>
        </span>
    @else
        <a href="{{ $paginator->previousPageUrl() }}" rel="prev"
            class="h-8 w-8 rounded-md hover:bg-[#12b7b6] transition-colors text-gray-700 paginator-link flex items-center justify-center"
            aria-disabled="true">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
            </svg>
        </a>
    @endif


    @php
        $pageCount = $paginator->lastPage();
        $currentPage = $paginator->currentPage();

        if ($currentPage <= 2) {
            $startIndex = 1;
            $endIndex = min(3, $pageCount);
        } else {
            $startIndex = $currentPage - 1;
            $endIndex = min($currentPage + 1, $pageCount);
        }
    @endphp

    @for ($i = $startIndex; $i <= $endIndex; $i++)
        @if ($i == $currentPage)
            <div
                class="h-8 w-8 flex items-center justify-center rounded-md text-sm font-medium transition-colors bg-[#12b7b6] text-white not-allowed-cursor">
                <span>{{ $i }}</span>
            </div>
        @else
            <a class="h-8 w-8 rounded-md text-sm font-medium transition-colors hover:bg-[#12b7b6] hover:text-white text-gray-700 paginator-link  flex items-center justify-center"
                href="{{ $paginator->url($i) }}">{{ $i }}</a>
        @endif
    @endfor

    @if ($currentPage < $pageCount - 1)
        <div class="disabled h-8 w-8 flex items-center justify-center rounded-md text-sm font-medium transition-colors">
            <span>...</span>
        </div>
        <a href="{{ $paginator->url($pageCount) }}"
            class="h-8 w-8 rounded-md text-sm font-medium transition-colors hover:bg-[#12b7b6] hover:text-white text-gray-700 paginator-link  flex items-center justify-center">
            {{ $pageCount }}
        </a>
    @endif


    @if ($paginator->hasMorePages())
        <a href="{{ $paginator->nextPageUrl() }}" rel="next"
            class="h-8 w-8 rounded-md hover:bg-[#12b7b6] transition-colors text-gray-700 paginator-link  flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
            </svg>
        </a>
    @else
        <span
            class="h-8 w-8 flex items-center justify-center rounded-md hover:bg-[#12b7b6] transition-colors text-gray-400 not-allowed-cursor">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
            </svg>
        </span>
    @endif

</div>
