{% if is_paginated %}
    <nav>
        <ul class="pagination">
            <li>
                <a
                    href="#"
                    aria-label="Previous"
                    
                    {% if page_obj.has_previous %}
                        onclick="paginateTo({{ page_obj.previous_page_number }}); return false"
                    {% else %}
                        onclick="return false"
                        style="cursor: not-allowed"
                    {% endif %}>
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                </a>
            </li>
            
            {% if page_obj.number|sub:4 > 1 %}
                <li><a href="#" onclick="paginateTo(1); return false">1</a></li>
                <li>...</li>
            {% endif %}
            
            {% for n in page_obj.paginator.page_range %}
                {% if n == page_obj.number %}
                    <li class="active"><a href="#" onclick="return false">{{ n }}</a></li>
                {% elif n > page_obj.number|sub:4 and n < page_obj.number or n < page_obj.number|add:4 and n > page_obj.number %}
                    <li><a href="#" onclick="paginateTo({{ n }}); return false">{{ n }}</a></li>
                {% endif %}
            {% endfor %}
            
            {% if page_obj.number|add:4 < page_obj.paginator.num_pages %}
                <li>...</li>
                <li><a href="#" onclick="paginateTo({{ page_obj.paginator.num_pages }}); return false">{{ page_obj.paginator.num_pages }}</a></li>
            {% endif %}
            
            <li>
                <a
                    href="#"
                    aria-label="Next"
                    
                    {% if page_obj.has_next %}
                        onclick="paginateTo({{ page_obj.next_page_number }}); return false"
                    {% else %}
                        onclick="return false"
                        style="cursor: not-allowed"
                    {% endif %}>
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                </a>
            </li>
        </ul>
    </nav>
    
    <script>
        function paginateTo(pageNum) {
            var urlObj = new URI(window.location.href)
            urlObj.setQuery('page', pageNum)
            window.location.href = urlObj.href()
        }
    </script>
{% endif %}