@{
                    int offsetLeft = 1;
                    int offsetRight = 1;
                    int offset = offsetLeft + offsetRight + 1;
                    int minPage = Math.Max(Math.Min(Model.Page - offsetLeft, Model.TotalPages - offset), 1);
                    int maxRange = Math.Min(Model.Page + offsetRight, Model.TotalPages);
                }
                <ol class="nav-pagination">
                    @if(minPage > 1)
                    {
                    <li class="nav-item nav-prev">
                        <a href="@Umbraco.ModifyQueryString("page", minPage)" class="nav-link">&lsaquo;</a>
                    </li>
                    }
                    @if (minPage > 1)
                    {
                        <li class="nav-item">
                            <a href="@Umbraco.ModifyQueryString("page", 1)" class="nav-link">1</a>
                        </li>

                        if (minPage > 3)
                        {
                            <li class="nav-item nav-select">
                                <a class="nav-link" href="#" title="Go to page">...</a>
                                <ol>
                                    @for(var i = 2; i < minPage; i++)
                                    {
                                        <li class="nav-item"><a href="@Umbraco.ModifyQueryString("page", i)" class="nav-link">@i</a></li>
                                    }
                                </ol>
                                <select name="page">
                                    @for(var i = maxRange + 1; i < Model.TotalPages; i++)
                                    {
                                        <option value="@i">@i</option>
                                    }
                                </select>
                            </li>
                        }
                        else if(minPage > 2)
                        {
                            <li class="nav-item">
                                <a href="@Umbraco.ModifyQueryString("page", 2)" class="nav-link">2</a>
                            </li>
                        }
                    }
                    @for (var i = minPage; i <= maxRange; i++)
                    {
                        <li class="nav-item @(Model.Page == i ? "active" : null)">
                            <a class="nav-link" href="@Umbraco.ModifyQueryString("page", i)">@i</a>
                        </li>
                    }
                    @if (maxRange < Model.TotalPages) {
                        if(Model.TotalPages - maxRange > 2)
                        {
                            <li class="nav-item nav-select">
                                <a class="nav-link" href="#" title="Go to page">...</a>
                                <ol>
                                    @for(var i = maxRange + 1; i < Model.TotalPages; i++)
                                    {
                                        <li class="nav-item"><a href="@Umbraco.ModifyQueryString("page", i)" class="nav-link">@i</a></li>
                                    }
                                </ol>
                                <select name="page">
                                    @for(var i = maxRange + 1; i < Model.TotalPages; i++)
                                    {
                                        <option value="@i">@i</option>
                                    }
                                </select>
                            </li>
                        }
                        else if(Model.TotalPages - maxRange > 1)
                        {
                            <li class="nav-item">
                                <a href="@Umbraco.ModifyQueryString("page", Model.TotalPages - 1)" class="nav-link">@(Model.TotalPages-1)</a>
                            </li>
                        }
                        <li class="nav-item">
                            <a href="@Umbraco.ModifyQueryString("page", Model.TotalPages)" class="nav-link">@Model.TotalPages</a>
                        </li>
                    }
                    <li class="nav-item nav-next">
                        @if (Model.TotalPages == Model.Page + 1)
                        {
                            <a class="nav-link">&rsaquo;</a>
                        }
                        else
                        {
                            <a href="@Umbraco.ModifyQueryString("page", Model.Page + 1)" class="nav-link">&rsaquo;</a>
                        }
                    </li>
                </ol>
                <script>
                    var navSelects = document.querySelectorAll('.nav-select');
                    for (var i = 0; i < navSelects.length; i++) {
                        var navSelect = navSelects[i];
                        var link = navSelect.querySelector("a");
                        link.addEventListener('click', function (e) {
                            e.preventDefault();
                            var _this = this;
                            _this.querySelector('select').click();
                        }, false);
                    }
                </script>