{% if page.previous or page.next %}
  <div class="pearing-panel-header d-flex justify-content-between gap-2">
    <div class="d-flex align-items-center gap-2">
      <label class="form-label mb-0" for="{{ per_page_id }}">Per page</label>
      <select class="form-select form-select-sm w-auto" id="{{ per_page_id }}" name="per_page" form="{{ per_page_form }}">
        <option value="20" {% if query.per_page == 20 or query.per_page is none %}selected{% endif %}>20</option>
        <option value="50" {% if query.per_page == 50 %}selected{% endif %}>50</option>
        <option value="100" {% if query.per_page == 100 %}selected{% endif %}>100</option>
      </select>
      {% if page.previous %}
        <a class="btn btn-sm btn-link" href="{{ page.previous }}">Previous</a>
      {% endif %}
    </div>
    {% if page.next %}
      <a class="btn btn-sm btn-link" href="{{ page.next }}">Next</a>
    {% else %}
      <span></span>
    {% endif %}
  </div>
{% endif %}