@push('include-css')
    <style>
        .custom-pagination {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .page-item {
            margin: 0 5px;
            border-radius: 5px;
            text-align: center;
            text-decoration: none;
        }

        .page-link {
            border-radius: 6px;
            padding: 4px 8px;
            background-color: #f8f9fa;
            color: black;
            border: 1px solid #ddd;
            text-decoration: none;
        }

        .page-item.active .page-link {
            background-color: #24576A;
            color: white;
            border-color: #24576A;
        }

        .page-item.disabled .page-link {
            background-color: #e9ecef;
            color: #6c757d;
            cursor: not-allowed;
        }

        .page-item:hover .page-link {
            color: black;
            background-color: #e2e6ea;
        }
    </style>
@endpush


<div class="custom-pagination">
    @if ($items->onFirstPage())
        <span class="page-item disabled">
            <span class="page-link">Previous</span>
        </span>
    @else
        <a class="page-item" href="{{ $items->previousPageUrl() }}">
            <span class="page-link">Previous</span>
        </a>
    @endif

    @foreach ($items->getUrlRange(1, $items->lastPage()) as $page => $url)
        <a class="page-item {{ $page == $items->currentPage() ? 'active' : '' }}" href="{{ $url }}">
            <span class="page-link">{{ $page }}</span>
        </a>
    @endforeach

    @if ($items->hasMorePages())
        <a class="page-item" href="{{ $items->nextPageUrl() }}">
            <span class="page-link">Next</span>
        </a>
    @else
        <span class="page-item disabled">
            <span class="page-link">Next</span>
        </span>
    @endif
</div>