{% load helpers %}

<div class="row">
  <div class="col col-md-6 mb-0">
    {% if paginator.num_pages > 1 %}
      <div class="btn-group btn-group-sm" role="group" aria-label="Pages">
        {% if page.has_previous %}
          <a href="#" hx-get="{% querystring request page=page.previous_page_number %}" hx-target="#object_list" class="btn btn-outline-secondary">
            <i class="mdi mdi-chevron-double-left"></i>
          </a>
        {% endif %}
        {% for p in page.smart_pages %}
          {% if p %}
            <a href="#" hx-get="{% querystring request page=p %}" hx-target="#object_list" class="btn btn-outline-secondary{% if page.number == p %} active{% endif %}">
              {{ p }}
            </a>
          {% else %}
            <button type="button" class="btn btn-outline-secondary" disabled>
              <span>&hellip;</span>
            </button>
          {% endif %}
        {% endfor %}
        {% if page.has_next %}
          <a href="#" hx-get="{% querystring request page=page.next_page_number %}" hx-target="#object_list" class="btn btn-outline-secondary">
            <i class="mdi mdi-chevron-double-right"></i>
          </a>
        {% endif %}
      </div>
    {% endif %}
  </div>
  <div class="col col-md-6 mb-0 text-end">
    <div class="dropdown dropup">
      <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
        Per Page
      </button>
      <ul class="dropdown-menu">
        {% for n in page.paginator.get_page_lengths %}
          <li><a class="dropdown-item" href="#" hx-get="{% querystring request per_page=n %}" hx-target="#object_list">{{ n }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>