@model PagerModel

<div class="container-fluid m-0 p-0 btn-group" style="background-color:#d4b6bd; border-radius:10px; height:45px; color:black">
    <div class="col-3 btn-group p-1 m-1">
        <p> 
            @Model.StartRecord to @Model.EndRecord of @Model.TotalItems
        </p>
    </div>

    <div class="col-5 btn-group justify-content-center">
        <span class="col-7 mt-2 p-0">
            @ViewData["Title"]
        </span>

        <span class="col-8 p-1">
            <select class="form-control" aria-label="page size selector" style="width:auto;" id="pageSelector" asp-items="Model.GetPageSizes();"
                    onchange="ChangePageSize(this)">
            </select>
        </span>

    </div>


    <div class="col-4 btn-group justify-content-end mt-2">
    <p> 
       Page @Model.CurrentPage / @Model.TotalPages
    </p>
    </div>
</div>

<script>
    function ChangePageSize(obj)
    {
        var controllerName = '@this.ViewContext.RouteData.Values["controller"].ToString()';
        window.location.href = "/" + controllerName + "/@Model.Action" + "?pageSize=" + obj.value + "&SearchText=" + "@Model.SearchText" + "&sortExpression=" + "@Model.SortExpression";
    }
</script>