{% if page_obj.has_other_pages %}
<div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 0 0;margin-top:.75rem;border-top:1px solid var(--cms-border)">
  <span style="font-size:.8rem;color:var(--cms-muted)">
    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
    &nbsp;&middot;&nbsp;
    {{ page_obj.paginator.count }} item{{ page_obj.paginator.count|pluralize }}
  </span>
  <div style="display:flex;gap:.3rem">
    {% if page_obj.has_previous %}
      <a href="?{% if filter_qs %}{{ filter_qs }}&{% endif %}page={{ page_obj.previous_page_number }}"
         class="btn-cms-ghost" style="padding:.3rem .65rem;font-size:.8rem;">
        <i class="fa-solid fa-chevron-left"></i>
      </a>
    {% endif %}
    {% for num in page_obj.paginator.page_range %}
      {% if num == page_obj.number %}
        <span class="btn-cms" style="padding:.3rem .65rem;font-size:.8rem;cursor:default;">{{ num }}</span>
      {% elif num >= page_obj.number|add:"-2" and num <= page_obj.number|add:"2" %}
        <a href="?{% if filter_qs %}{{ filter_qs }}&{% endif %}page={{ num }}"
           class="btn-cms-ghost" style="padding:.3rem .65rem;font-size:.8rem;">{{ num }}</a>
      {% elif num == 1 or num == page_obj.paginator.num_pages %}
        <a href="?{% if filter_qs %}{{ filter_qs }}&{% endif %}page={{ num }}"
           class="btn-cms-ghost" style="padding:.3rem .65rem;font-size:.8rem;">{{ num }}</a>
      {% elif num == page_obj.number|add:"-3" or num == page_obj.number|add:"3" %}
        <span style="padding:.3rem .4rem;font-size:.8rem;color:var(--cms-muted)">…</span>
      {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
      <a href="?{% if filter_qs %}{{ filter_qs }}&{% endif %}page={{ page_obj.next_page_number }}"
         class="btn-cms-ghost" style="padding:.3rem .65rem;font-size:.8rem;">
        <i class="fa-solid fa-chevron-right"></i>
      </a>
    {% endif %}
  </div>
</div>
{% endif %}