{% load helpers %}
{% load i18n %}
{% if page %}
  <div class="d-flex justify-content-between align-items-center border-top p-2">
    {# Pages carousel #}
    {% if paginator.num_pages > 1 %}
      <nav aria-label="{% trans 'Page selection' %}">
        <ul class="pagination mb-0">
          {# Previous page #}
          {% if page.has_previous %}
            <li class="page-item">
              <a href="{% querystring request cfbackrefs_page=page.previous_page_number %}"
                 class="page-link">
                <i class="mdi mdi-chevron-left"></i>
              </a>
            </li>
          {% endif %}
          {# Page numbers #}
          {% for p in page.smart_pages %}
            <li class="page-item{% if page.number == p %} active{% endif %}">
              {% if p %}
                <a href="{% querystring request cfbackrefs_page=p %}"
                   class="page-link {% if page.number == p %}active{% endif %}">{{ p }}</a>
              {% else %}
                <span class="page-link" disabled>&hellip;</span>
              {% endif %}
            </li>
          {% endfor %}
          {# Next page #}
          {% if page.has_next %}
            <li class="page-item">
              <a href="{% querystring request cfbackrefs_page=page.next_page_number %}"
                 class="page-link">
                <i class="mdi mdi-chevron-right"></i>
              </a>
            </li>
          {% endif %}
        </ul>
      </nav>
    {% endif %}
    {# Showing #}
    <small class="text-end text-muted">
      {% blocktrans trimmed with start=page.start_index end=page.end_index total=page.paginator.count %}
        Showing {{ start }}-{{ end }} of {{ total }}
      {% endblocktrans %}
    </small>
    {# Per-Page dropdown #}
    <nav aria-label="{% trans 'Pagination options' %}">
      <div class="dropdown dropdown-menu-end">
        <button class="btn btn-sm btn-outline-secondary dropdown-toggle"
                type="button"
                data-bs-toggle="dropdown">{% trans 'Per Page' %}</button>
        <ul class="dropdown-menu">
          {% for n in page.paginator.get_page_lengths %}
            <li>
              <a href="{% querystring request cfbackrefs_per_page=n %}"
                 class="dropdown-item">{{ n }}</a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </nav>
  </div>
{% endif %}