{% load i18n static %}

<div class="d-flex justify-content-between align-items-center p-2">
  <div class="text-body-secondary">
    {% trans "Showing" %} {{ page_obj.start_index }} {% trans "to" %} {{ page_obj.end_index }}
    {% trans "of" %} {{ page_obj.paginator.count }} {% trans "results" %}
  </div>

  <nav aria-label="{% trans 'Pagination' %}">
    <ul class="pagination pagination-sm mb-3">

      {# First Page #}
      {% if page_obj.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?page=1{% if q %}&q={{ q }}{% endif %}{% if mode %}&mode={{ mode }}{% endif %}" aria-label="{% trans 'First' %}">
            {% if LANGUAGE_CODE == 'ar' %}
              <span class="fa fa-angle-double-right" aria-hidden="true"></span>
            {% else %}
              <span class="fa fa-angle-double-left" aria-hidden="true"></span>
            {% endif %}
          </a>
        </li>
      {% else %}
        <li class="page-item disabled">
          <span class="page-link">
            {% if LANGUAGE_CODE == 'ar' %}
              <span class="fa fa-chevron-right" aria-hidden="true"></span>
            {% else %}
              <span class="fa fa-chevron-left" aria-hidden="true"></span>
            {% endif %}
          </span>
        </li>
      {% endif %}

      {# Previous Page #}
      {% if page_obj.has_previous %}
        <li class="page-item">
          <a class="page-link"
             href="?page={{ page_obj.previous_page_number }}{% if q %}&q={{ q }}{% endif %}{% if mode %}&mode={{ mode }}{% endif %}"
             aria-label="{% trans 'Previous' %}" rel="prev">
            {% if LANGUAGE_CODE == 'ar' %}
              <span class="fas fa-chevron-right" aria-hidden="true"></span>
            {% else %}
              <span class="fas fa-chevron-left" aria-hidden="true"></span>
            {% endif %}
          </a>
        </li>
      {% endif %}

      {# Page Numbers (window of ±2 around current, plus first & last) #}
      {% with start=page_obj.number|add:"-2" end=page_obj.number|add:"2" %}
        {% for num in page_obj.paginator.page_range %}
          {% if num == 1 or num == page_obj.paginator.num_pages %}
            <li class="page-item {% if num == page_obj.number %}active{% endif %}">
              <a class="page-link" {% if num == page_obj.number %}aria-current="page"{% endif %}
                 href="?page={{ num }}{% if q %}&q={{ q }}{% endif %}{% if mode %}&mode={{ mode }}{% endif %}">{{ num }}</a>
            </li>
          {% elif num >= start and num <= end %}
            <li class="page-item {% if num == page_obj.number %}active{% endif %}">
              <a class="page-link" {% if num == page_obj.number %}aria-current="page"{% endif %}
                 href="?page={{ num }}{% if q %}&q={{ q }}{% endif %}{% if mode %}&mode={{ mode }}{% endif %}">{{ num }}</a>
            </li>
          {% endif %}
        {% endfor %}
      {% endwith %}

      {# Next Page #}
      {% if page_obj.has_next %}
        <li class="page-item">
          <a class="page-link"
             href="?page={{ page_obj.next_page_number }}{% if q %}&q={{ q }}{% endif %}{% if mode %}&mode={{ mode }}{% endif %}"
             aria-label="{% trans 'Next' %}" rel="next">
            {% if LANGUAGE_CODE == 'ar' %}
              <span class="fa fa-chevron-left" aria-hidden="true"></span>
            {% else %}
              <span class="fa fa-chevron-right" aria-hidden="true"></span>
            {% endif %}
          </a>
        </li>
      {% endif %}

      {# Last Page #}
      {% if page_obj.has_next %}
        <li class="page-item">
          <a class="page-link"
             href="?page={{ page_obj.paginator.num_pages }}{% if q %}&q={{ q }}{% endif %}{% if mode %}&mode={{ mode }}{% endif %}"
             aria-label="{% trans 'Last' %}">
            {% if LANGUAGE_CODE == 'ar' %}
              <span class="fa fa-angle-double-left" aria-hidden="true"></span>
            {% else %}
              <span class="fa fa-angle-double-right" aria-hidden="true"></span>
            {% endif %}
          </a>
        </li>
      {% endif %}

    </ul>
  </nav>
</div>