{% load i18n static %}
<div class="d-flex justify-content-between align-items-center mt-4 mb-3">
    <div class="text-body-secondary fw-bold fs-10">
        {{ _("Showing") }} {{ page_obj.start_index }} {{ _("to") }} {{ page_obj.end_index }}
        {{ _("of") }} {{ page_obj.paginator.count }} {{ _("results") }}
    </div>
    <nav aria-label="Page navigation">
        <ul class="pagination mb-0">
            {# First Page Link #}
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page=1{% if q %}&q={{ q }}{% endif %}">
                        {% if LANGUAGE_CODE == 'ar' %}
                            <span class="fas fa-angle-double-right"></span>
                        {% else %}
                            <span class="fas fa-angle-double-left"></span>
                        {% endif %}
                    </a>
                </li>
            {% else %}
                <li class="page-item">
                    <span class="page-link">
                        {% if LANGUAGE_CODE == 'ar' %}
                            <span class="fas fa-chevron-right"></span>
                        {% else %}
                            <span class="fas fa-chevron-left"></span>
                        {% endif %}
                    </span>
                </li>
            {% endif %}
            {# Previous Page Link #}
            {% 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 LANGUAGE_CODE == 'ar' %}
                            <span class="fas fa-chevron-right"></span>
                        {% else %}
                            <span class="fas fa-chevron-left"></span>
                        {% endif %}
                    </a>
                </li>
            {% endif %}
            {# Page Numbers #}
            {% for num in page_obj.paginator.page_range %}
                {% if num == 1 or num == page_obj.paginator.num_pages or num >= page_obj.number|add:-2 and num <= page_obj.number|add:2 %}
                    <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 %}">{{ num }}</a>
                    </li>
                {% endif %}
            {% endfor %}
            {# Next Page Link #}
            {% 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 LANGUAGE_CODE == 'ar' %}
                            <span class="fas fa-chevron-left"></span>
                        {% else %}
                            <span class="fas fa-chevron-right"></span>
                        {% endif %}
                    </a>
                </li>
            {% endif %}
            {# Last Page Link #}
            {% 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 LANGUAGE_CODE == 'ar' %}
                            <span class="fas fa-angle-double-left"></span>
                        {% else %}
                            <span class="fas fa-angle-double-right"></span>
                        {% endif %}
                    </a>
                </li>
            {% endif %}
        </ul>
    </nav>
</div>