{% load helpers %}

<div id="{{ paginator_id|default:'paginator' }}"
     class="paginator align-items-center d-flex fs-5 gap-10 justify-content-end mt-16 text-secondary"
     {% if htmx_enabled|default:False %}
         hx-history="false"
         hx-indicator="#{{ table_id }}-htmx-indicator"
         hx-inherit="*"
         hx-push-url="true"
         hx-swap="show:#{{ paginator_id|default:'paginator' }}:bottom"
         hx-select-oob="#{{ table_id }},#header_messages,#paginator,#select_all_box"
     {% endif %}
>
    {% if page %}
        {% comment %}
        `role="status"` makes this a polite live region, so that paging through a list with HTMX -- which replaces this
        element rather than reloading the page -- announces the new range instead of changing silently.
        {% endcomment %}
        <div class="nb-paginator-info" role="status">
            Showing {{ page.start_index }}-{{ page.end_index }} of {{ page.paginator.count }}
        </div>
        {% if not exclude_controls %}
            <div class="vr border-start my-8 nb-paginator-divider"></div>
        {% endif %}
    {% endif %}
    {% if not exclude_controls %}
        <form class="align-items-center d-flex gap-4" method="get">
            {% for key, value_list in request.GET.lists %}
                {% if key != 'per_page' %}
                    {% for value in value_list %}
                        <input type="hidden" name="{{ key }}" value="{{ value }}" />
                    {% endfor %}
                {% endif %}
            {% endfor %}
            {% comment %}
            The visible "per page" text after this select is not associated with it, so without `aria-label` the control
            is announced with no name at all.
            {% endcomment %}
            <select name="per_page"
                    id="per_page"
                    aria-label="Items per page"
                    class="form-select"
                    {% if htmx_enabled|default:False %}
                        hx-trigger="change"
                        hx-get="{% django_querystring page=None per_page=None %}"
                    {% endif %}
            >
                {% if page.paginator.per_page not in "PER_PAGE_DEFAULTS"|settings_or_config %}
                    <option value="{{ page.paginator.per_page }}" selected="selected">
                        {{ page.paginator.per_page }}
                    </option>
                {% endif %}
                {% for n in "PER_PAGE_DEFAULTS"|settings_or_config %}
                    <option value="{{ n }}"
                            {% if page.paginator.per_page == n %} selected="selected"{% endif %}
                    >
                        {{ n }}
                    </option>
                {% endfor %}
            </select>
            per page
        </form>
    {% endif %}
    {% if paginator.num_pages > 1 and not exclude_controls %}
        <div class="vr border-start my-8 nb-paginator-divider"></div>
        <nav>
            <ul class="pagination mb-0">
                {% if page.has_previous %}
                    <li class="page-item">
                        <a aria-label="Previous" class="page-link" href="{% django_querystring page=page.previous_page_number %}"
                           {% if htmx_enabled|default:False %}
                               hx-get="{% django_querystring page=page.previous_page_number %}"
                           {% endif %}
                        >
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                {% endif %}
                {% for p in page.smart_pages %}
                    {% if p %}
                        <li class="page-item {% if page.number == p %} active{% endif %}">
                            <a class="page-link" href="{% django_querystring page=p %}"
                               {% if htmx_enabled|default:False %}
                                   hx-get="{% django_querystring page=p %}"
                               {% endif %}
                            >
                                {{ p }}
                            </a>
                        </li>
                    {% else %}
                        <li class="page-item disabled"><a class="page-link" tabindex="-1">&hellip;</a></li>
                    {% endif %}
                {% endfor %}
                {% if page.has_next %}
                    <li class="page-item">
                        <a aria-label="Next" class="page-link" href="{% django_querystring page=page.next_page_number %}"
                           {% if htmx_enabled|default:False %}
                               hx-get="{% django_querystring page=page.next_page_number %}"
                           {% endif %}
                        >
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
        <div class="pagination mb-0 d-flex align-items-center gap-4">
            <label for="paginator-go-to">Go to page</label>
            <div class="input-group" id="nb-paginator-go-to">
                <input type="number" name="page" id="paginator-go-to" value="{{ page.number }}" class="form-control"
                       min="1" max="{{ paginator.num_pages }}" aria-label="Go to page"
                       {% if htmx_enabled|default:False %}
                           hx-get="{% django_querystring page=None %}"
                           hx-trigger="keydown[key=='Enter']"
                       {% endif %}>
                <span class="page-item">
                    <a class="page-link px-6" href="#" aria-label="Go to page" title="Go to page" id="paginator-go-to-link"
                       {% if htmx_enabled|default:False %}
                           hx-get="{% django_querystring page=None %}"
                           hx-include="#paginator-go-to"
                       {% endif %}>
                        <span aria-hidden="true" class="mdi mdi-chevron-right"></span>
                    </a>
                </span>
            </div>
        </div>
    {% endif %}
</div>