{% load i18n %}

<nav aria-label="Pagination">
  <ol class="pagination flex-wrap gap-2 justify-content-center mb-0">
    {% if previous_url %}
    <li class="page-item">
      <a class="page-link rounded-4 shadow-sm" href="{{ previous_url }}" aria-label="Previous">
        <i class="mx-2 bi bi-chevron-left"></i>
        {% translate 'Prev' %}
      </a>
    </li>
    {% else %}
    <li class="page-item disabled">
      <a class="page-link rounded-4 shadow-sm" href="#" aria-label="Previous">
        <i class="mx-2 bi bi-chevron-left"></i>
        {% translate 'Prev' %}
      </a>
    </li>
    {% endif %}

    {% if next_url %}
    <li class="page-item">
      <a class="page-link rounded-4 shadow-sm" href="{{ next_url }}" aria-label="Next">
        {% translate 'Next' %}
        <i class="mx-2 bi bi-chevron-right"></i>
      </a>
    </li>
    {% else %}
    <li class="page-item disabled">
      <a class="page-link rounded-4 shadow-sm" href="#" aria-label="Next">
        {% translate 'Next' %}
        <i class="mx-2 bi bi-chevron-right"></i>
      </a>
    </li>
    {% endif %}
  </ol>
</nav>