{% load pages %}

<div class="row">
    <div class="col-sm-12 col-md-6 col-lg-7">
        {% if is_paginated %}
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <button
                            name="page"
                            class="page-link"
                            value="{{ page_obj.previous_page_number }}"
                            form={{ form_id }}>
                            &laquo;
                        </button>
                    </li>
                {% endif %}

                {% for page in page_obj|slice_pages_with_first_last_ellipsis:2 %}
                    {% if page == '...' %}
                        <li class="page-item">
                            <button disabled class="page-link" name="ellipsis">...</button>
                        </li>
                    {% else %}
                        <li class="page-item {% if page_obj.number == page.number %}active{% endif %}">
                            <button
                                name="page"
                                class="page-link"
                                value="{{ page.number }}"
                                form={{ form_id }}>
                                {{ page.number }}
                            </button>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item arrow">
                        <button
                            name="page"
                            class="page-link"
                            value="{{ page_obj.next_page_number }}"
                            form={{ form_id }}>
                            &raquo;
                        </button>
                    </li>
                {% endif %}
            </ul>
        {% endif %}
    </div>
    <div class="input-group col-sm-12 col-md-6 col-lg-5">
        <select
            class="custom-select"
            onchange="this.form.submit()"
            name="paginate_by"
            form={{ form_id }}>
            <option value="10" {% if paginate_by == "10" %}selected{% endif %}>10</option>
            <option value="25" {% if paginate_by == "25" %}selected{% endif %}>25</option>
            <option value="50" {% if paginate_by == "50" %}selected{% endif %}>50</option>
            <option value="100" {% if paginate_by == "100" %}selected{% endif %}>100</option>
            {% if page_obj.paginator %}
                <option value="all" {% if paginate_by == "all" %}selected{% endif %}>{% trans 'all' %}</option>
            {% endif %}
        </select>
        <div class="input-group-append">
            <label class="input-group-text" labelfor="paginate_by">
                records per page
            </label>
        </div>
    </div>
</div>