{% load helpers %}
{% load i18n %}

{% if rules_page_obj %}
  <div
      class="d-flex justify-content-between align-items-center border-top p-2"
      hx-target="closest .htmx-container"
      hx-disinherit="hx-select"
      hx-swap="outerHTML"
      hx-push-url="true"
  >

    {# Pages carousel #}
    {% if rules_paginator.num_pages > 1 %}
      <nav aria-label="{% trans "Page selection" %}">
        <ul class="pagination mb-0">

          {# Previous page #}
          {% if rules_page_obj.has_previous %}
            <li class="page-item">
              <a href="{% querystring request page=rules_page_obj.previous_page_number %}" class="page-link" rel="prev" aria-label="{% trans "Previous page" %}">
                <i class="mdi mdi-chevron-left" aria-hidden="true"></i>
              </a>
            </li>
          {% endif %}
          {# /Previous page #}

          {# Page numbers #}
          {% for p in rules_page_obj.smart_pages %}
            <li class="page-item{% if rules_page_obj.number == p %} active{% endif %}"{% if rules_page_obj.number == p %} aria-current="page"{% endif %}>
              {% if p %}
                <a href="{% querystring request page=p %}" class="page-link {% if rules_page_obj.number == p %} active{% endif %}" aria-label="{% blocktrans with num=p %}Page {{ num }}{% endblocktrans %}">
                  {{ p }}
                </a>
              {% else %}
                <span class="page-link" disabled aria-hidden="true">&hellip;</span>
              {% endif %}
            </li>
          {% endfor %}
          {# /Page numbers #}

          {# Next page #}
          {% if rules_page_obj.has_next %}
            <li class="page-item">
              <a href="{% querystring request page=rules_page_obj.next_page_number %}" class="page-link" rel="next" aria-label="{% trans "Next page" %}">
                <i class="mdi mdi-chevron-right" aria-hidden="true"></i>
              </a>
            </li>
          {% endif %}
          {# /Next page #}

        </ul>
      </nav>
    {% endif %}
    {# /Pages carousel #}

    {# Showing #}
    <small class="text-end text-muted">
      {% blocktrans trimmed with start=rules_page_obj.start_index end=rules_page_obj.end_index total=rules_paginator.count %}
        Showing {{ start }}-{{ end }} of {{ total }}
      {% endblocktrans %}
    </small>
    {# /Showing #}

    {# Pagination options #}
    <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 rules_paginator.get_page_lengths %}
            <li>
              <a href="{% querystring request per_page=n page=1 %}" class="dropdown-item">{{ n }}</a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </nav>
    {# /Pagination options #}

  </div>
{% endif %}