@{
    var pg = ViewBag.Page as int? ?? 1;
    var totalPages = ViewBag.TotalPages as int? ?? 0;
    var totalItems = ViewBag.TotalItems as int? ?? 0;
    var pageSize = ViewBag.PageSize as int? ?? 20;   // 0 == All
    var request = ViewContext.HttpContext.Request;

    // Preserve existing query-string filters (zoneId, level, search, etc.), swapping out
    // "page" and "pageSize".
    var baseParams = request.Query
        .Where(kv => kv.Key != "page" && kv.Key != "pageSize")
        .SelectMany(kv => kv.Value.Select(v => $"{Uri.EscapeDataString(kv.Key)}={Uri.EscapeDataString(v ?? string.Empty)}"))
        .ToList();
    Func<int, int, string> url = (p, ps) =>
    {
        var ps2 = new List<string>(baseParams) { $"pageSize={ps}", $"page={p}" };
        return $"{request.Path}?{string.Join("&", ps2)}";
    };
    Func<int, string> pageUrl = p => url(p, pageSize);

    var prevHref = pg <= 1 ? "#" : pageUrl(pg - 1);
    var nextHref = pg >= totalPages ? "#" : pageUrl(pg + 1);
    var start = Math.Max(1, pg - 2);
    var end = Math.Min(totalPages, pg + 2);

    var firstItem = totalItems == 0 ? 0 : (pageSize <= 0 ? 1 : (pg - 1) * pageSize + 1);
    var lastItem = pageSize <= 0 ? totalItems : Math.Min(pg * pageSize, totalItems);
}

@if (totalItems > 0)
{
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3">
        <div class="d-flex align-items-center gap-2">
            <span class="small text-muted">Show</span>
            <select class="form-select form-select-sm" style="width:auto" onchange="location.href=this.value" aria-label="Items per page">
                @foreach (var opt in new[] { 20, 50, 100, 500 })
                {
                    <option value="@url(1, opt)" selected="@(pageSize == opt)">@opt</option>
                }
                <option value="@url(1, 0)" selected="@(pageSize <= 0)">All</option>
            </select>
            <span class="small text-muted">per page</span>
        </div>
        <span class="small text-muted">Showing @firstItem–@lastItem of @totalItems</span>
    </div>

    @if (totalPages > 1)
    {
        <nav aria-label="Page navigation" class="mt-2">
            <ul class="pagination justify-content-center mb-0">
                <li class="page-item @(pg <= 1 ? "disabled" : "")">
                    <a class="page-link" href="@prevHref">Previous</a>
                </li>
                @if (start > 1)
                {
                    <li class="page-item"><a class="page-link" href="@pageUrl(1)">1</a></li>
                    @if (start > 2)
                    {
                        <li class="page-item disabled"><span class="page-link">…</span></li>
                    }
                }
                @for (int i = start; i <= end; i++)
                {
                    <li class="page-item @(i == pg ? "active" : "")">
                        <a class="page-link" href="@pageUrl(i)">@i</a>
                    </li>
                }
                @if (end < totalPages)
                {
                    @if (end < totalPages - 1)
                    {
                        <li class="page-item disabled"><span class="page-link">…</span></li>
                    }
                    <li class="page-item"><a class="page-link" href="@pageUrl(totalPages)">@totalPages</a></li>
                }
                <li class="page-item @(pg >= totalPages ? "disabled" : "")">
                    <a class="page-link" href="@nextHref">Next</a>
                </li>
            </ul>
        </nav>
    }
}
