{% extends 'django_tables2/bootstrap.html' %}

{% load django_tables2 %}

{% block table-wrapper %}
<div class="table-container table-responsive">
    {% block table %}
    {{ block.super }}
    {% endblock table %}

    {% if table.page and table.paginator.num_pages > 1 %}

        {% with current_page=table.page.number page_count=table.paginator.num_pages rows_per_page=table.page.object_list|length total_rows=table.page.paginator.count %}
        {% block pagination %}
        <div style="">

            <div class="form-group col-sm-3" style="margin-bottom:5px;">
            <select id="id_per_page" class="form-control" style="display: inline; width: 100px; margin-right: 10px;" name="per_page" onchange="window.location.href = './?per_page='+$(this).val();">
                <option></option>
                <option value="1" {% if request.GET.per_page == '1' %}selected="selected"{% endif %}>1</option>
                <option value="3" {% if request.GET.per_page == '3' %}selected="selected"{% endif %}>3</option>
                <option value="5" {% if request.GET.per_page == '5' %}selected="selected"{% endif %}>5</option>
                <option value="10" {% if request.GET.per_page == '10' %}selected="selected"{% endif %}>10</option>
                <option value="20" {% if request.GET.per_page == '20' %}selected="selected"{% endif %}>20</option>
            </select>
            <label for="id_per_page" style="display: inline-block;">Results per page</label>
            </div>
            <div class="col-sm-9"></div>

            <div class="form-group col-sm-12">
                <ul class="pagination" style="margin-bottom: 2px;margin-top:2px;">
                    {% block pagination.allpages %}
                        <li class="current">
                            <span style="color:black;">Page</span>
                        </li>
                        {% for page in table.paginator.page_range %}
                            {% with range_start=current_page|add:"-3" range_end=current_page|add:"3" page_count_minus_5=page_count|add:"-5" page_count_minus_1=page_count|add:"-1" %}
                                {% if page == current_page %}
                                    <li class="active">
                                        <span>{{ page }}</span>
                                    </li>
                                {% elif page == 1 or page >= range_start and page <= range_end or page == page_count %}
                                    <li class="next">
                                        <a href="{% querystring table.prefixed_page_field=page %}">{{ page }}</a>
                                    </li>
                                {% endif %}
                                {% if page == 1 and current_page > 5 or pagina == page_count_minus_1 and current_page <= page_count_minus_5 %}
                                    <li class="current"><span style="color:black;">...</span></li>
                                {% endif %}
                            {% endwith %}
                        {% endfor %}
                    {% endblock pagination.allpages %}
                </ul>
                {% block pagination.cardinality %}
                    <div class="cardinality">
                        {% if total_rows != rows_per_page %}
                            {{ rows_per_page }} of {{ total_rows }}
                        {% else %}
                            {{ total_rows }}
                        {% endif %}
                        {% if total_rows == 1 %}
                            {{ table.data.verbose_name }}
                        {% else %}
                            {{ table.data.verbose_name_plural }}
                        {% endif %}
                    </div>
                {% endblock pagination.cardinality %}
            </div>
        </div>
     {% endblock pagination %}

        {% endwith %}

    {% endif %}
</div>
{% endblock table-wrapper %}
