<div class="flex justify-center items-center mt-4 gap-4">
    @if ($paginator->onFirstPage())
        <span class="px-2 py-1 bg-gray-500 border border-gray-600 rounded-md" aria-disabled="true">
            <img src="{{ asset('/assets/templates/trello/images/arrow-left.svg') }}" alt="">
        </span>
    @else
        <a href="{{ $paginator->previousPageUrl() }}" rel="prev"
            class="px-2 py-1 bg-gradient-to-r from-[#5823c1] to-[#ff8ac7] border border-gray-600 rounded-md paginator-link relative"
            aria-disabled="true">
            <img src="{{ asset('/assets/templates/trello/images/arrow-left.svg') }}" alt="">
        </a>
    @endif

    <!-- Pagination Links -->
    @php
        $pageCount = $paginator->lastPage();
        $currentPage = $paginator->currentPage();
        $startIndex = $currentPage <= 2 ? 1 : max($currentPage - 2, 1);
        $endIndex = $currentPage <= 2 ? min($pageCount, 6) : min($currentPage + 2, $pageCount);
    @endphp

    @for ($i = $startIndex; $i <= $endIndex; $i++)
        @if ($i == $currentPage)
            <div
                class="px-3 py-1 text-white bg-gradient-to-r from-[#5823c1] to-[#ff8ac7] border border-gray-600 rounded-md paginator-link not-allowed-cursor">
                <span>{{ $i }}</span>
            </div>
        @else
            <a class="px-3 py-1 text-white bg-gradient-to-r from-[#1f4470]/10 to-[#552481]/10 border border-gray-600 rounded-md paginator-link"
                href="{{ $paginator->url($i) }}">{{ $i }}</a>
        @endif
    @endfor

    @if ($currentPage < $pageCount - 1)
        <div class="disabled"><span>...</span></div>
        <a href="{{ $paginator->url($pageCount) }}"
            class="px-3 py-1 text-white bg-gradient-to-r  from-[#1f4470]/10 to-[#552481]/10 border border-gray-600 rounded-md paginator-link">
            {{ $pageCount }}
        </a>
    @endif


    @if ($paginator->hasMorePages())
        <a href="{{ $paginator->nextPageUrl() }}" rel="next"
            class=" paginator-link px-2 py-1  bg-gradient-to-r from-[#5823c1] to-[#ff8ac7] border border-gray-600 rounded-md paginator-link">
            <img src="{{ asset('/assets/templates/trello/images/arrow-right.svg') }}" alt="">
        </a>
    @else
        <span class="px-2 py-1  bg-gray-500 border border-gray-600 rounded-md">
            <img src="{{ asset('/assets/templates/trello/images/arrow-right.svg') }}" alt="">
        </span>
    @endif

</div>
