@if ($cards['page']->lastPage() > 1)
    <ul class="co-pagination-basic" aria-label='Pagination' role='menubar'>
        @if ($cards['page']->lastPage() < 4)
            <li class="{{ $cards['page']->currentPage() > 1 ? '' : 'disabled pointer-events-none opacity-30' }}">
                <a href="{{ $cards['page']->previousPageUrl() }}">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                    </span>
                </a>
            </li>
            @for ($i = 0; $i < $cards['page']->lastPage(); $i++)
                <li class="{{ $cards['page']->currentPage() == $i + 1 ? 'current' : '' }} {{ $cards['page']->currentPage() > 1 ? '' : 'disabled' }}">
                    <a href="{{ $cards['page']->url($i + 1) }}">{{ $i + 1 }}</a></li>
            @endfor
            <li class="{{$cards['page']->currentPage() >= $cards['page']->lastPage() ? 'disabled  pointer-events-none opacity-30' : '' }}">
                <a href="{{ $cards['page']->nextPageUrl() }}">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                        </svg>
                    </span>
                </a>
            </li>
        @else
            <li class="{{ $cards['page']->currentPage() > 1 ? '' : 'disabled pointer-events-none opacity-30' }}">
                <a href="{{ $cards['page']->previousPageUrl() }}">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                    </span>
                </a>
            </li>
            @if ( $cards['page']->currentPage() >= 4 and
                    $cards['page']->currentPage() < $cards['page']->lastPage())
                @if ($cards['page']->lastPage() > 4)
                    <li
                        class="{{ $cards['page']->currentPage() == $cards['page']->lastPage() ? 'current' : '' }}">
                        <a href="{{ $cards['page']->url($cards['page']->url(1)) }}"
                        >1</a></li>
                    <li><a href="">...</a></li>
                @endif
                <li class="{{ $cards['page']->currentPage() == $cards['page']->currentPage() - 1 ? 'current' : '' }}">
                    <a href="{{ $cards['page']->url($cards['page']->currentPage() - 1) }}"
                    >{{ $cards['page']->currentPage() - 1 }}</a>
                </li>
                <li
                    class="{{ $cards['page']->currentPage() == $cards['page']->currentPage() ? 'current' : '' }}">
                    <a href="{{ $cards['page']->url($cards['page']->currentPage()) }}"
                    >{{ $cards['page']->currentPage() }}</a></li>
                @if ($cards['page']->currentPage() < $cards['page']->lastPage() - 1)
                    <li
                        class="{{ $cards['page']->currentPage() == $cards['page']->currentPage() + 1 ? 'current' : '' }}">
                        <a href="{{ $cards['page']->url($cards['page']->currentPage() + 1) }}"
                        >{{ $cards['page']->currentPage() + 1 }}</a>
                    </li>
                @endif
            @else
                <li
                    class="{{ $cards['page']->currentPage() == 1 ? 'current' : '' }}">
                    <a href="{{ $cards['page']->url($cards['page']->url(1)) }}"
                    >1</a></li>
                @if ($cards['page']->currentPage() == $cards['page']->lastPage() and $cards['page']->lastPage() > 4)
                    <li><a href="">...</a></li>
                    @for ($i = $cards['page']->lastPage() - 3; $i < $cards['page']->lastPage() - 1; $i++)
                        <li
                            class="{{ $cards['page']->currentPage() == $i + 1 ? 'current' : '' }}">
                            <a href="{{ $cards['page']->url($i + 1) }}"
                            >{{ $i + 1 }}</a></li>
                    @endfor
                    <li  class="{{ $cards['page']->currentPage() == $cards['page']->lastPage() ? 'current' : '' }}">
                        <a href="{{ $cards['page']->url($cards['page']->lastPage()) }}"
                        >{{ $cards['page']->lastPage() }}</a></li>
                @else
                    @for ($i = 1; $i < $cards['page']->lastPage() + 1; $i++)
                        @if ($i <= 3)
                            <li
                                class="{{ $cards['page']->currentPage() == $i + 1 ? 'current' : '' }}">
                                <a href="{{ $cards['page']->url($i + 1) }}"
                                >{{ $i + 1 }}</a></li>
                        @endif
                    @endfor
                @endif
            @endif
        @endif
        @if ($cards['page']->lastPage() > 4)
            @if ($cards['page']->currentPage() < $cards['page']->lastPage())
                <li><a href="">...</a></li>
            @endif
        @endif
        @if ($cards['page']->currentPage() < $cards['page']->lastPage() and $cards['page']->lastPage() > 4)
            <li
                class="{{ $cards['page']->currentPage() == $cards['page']->lastPage() ? 'current' : '' }}">
                <a href="{{ $cards['page']->url($cards['page']->lastPage()) }}"
                >{{ $cards['page']->lastPage() }}</a></li>
        @endif
        @if ($cards['page']->lastPage() >= 4)
            <li class=" {{$cards['page']->currentPage() >= $cards['page']->lastPage() ? 'disabled pointer-events-none opacity-30' : '' }}" >
                <a href="{{ $cards['page']->nextPageUrl() }}">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                        </svg>
                    </span>
                </a>
            </li>
        @endif
    </ul>
@endif