<div class="card-footer d-flex align-items-center">
  <p class="m-0 text-muted">Mostrando del <span>{{ pagination.start_index }}</span> al <span>{{ pagination.end_index }}</span></p>
  <ul class="pagination m-0 ms-auto">
    {% if pagination.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page={{ pagination.previous_page_number }}" tabindex="-1" aria-disabled="true">
          <!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="15 6 9 12 15 18" /></svg>
        </a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">
          <!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="15 6 9 12 15 18" /></svg>
        </a>
      </li>
    {% endif %}

    {% for page in pagination.paginator.page_range %}
      {% if page == pagination.number %}
        <li class="page-item active">
          <a class="page-link" href="?page={{ page }}">{{ page }}</a>
        </li>
      {% else %}
        <li class="page-item">
          <a class="page-link" href="?page={{ page }}">{{ page }}</a>
        </li>
      {% endif %}
    {% endfor %}

    {% if pagination.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ pagination.next_page_number }}">
          <!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 6 15 12 9 18" /></svg>
        </a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <a class="page-link" href="#">
          <!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 6 15 12 9 18" /></svg>
        </a>
      </li>
    {% endif %}
  </ul>
</div>
