{% load i18n %}

{% comment %}
Unified Pagination Template
Usage: {% include "includes/pagination_unified.html" %}

Optional context variables:
- page_obj: Required - Django paginator page object
- is_paginated: Optional - Boolean to show/hide pagination
- htmx_target: Optional - HTMX target selector (e.g., "#content-container")
- show_info: Optional - Show "Showing X to Y of Z" text (default: True)
- size: Optional - Pagination size: 'sm', 'md', 'lg' (default: 'sm')
{% endcomment %}

{% if page_obj and page_obj.paginator.num_pages > 1 %}
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
    {% if show_info|default:True %}
    <div class="text-muted small">
        {% trans "Showing" %} {{ page_obj.start_index }} {% trans "to" %} {{ page_obj.end_index }}
        {% trans "of" %} {{ page_obj.paginator.count }} {% trans "results" %}
    </div>
    {% endif %}

    <nav aria-label="{% trans 'Page navigation' %}">
        <ul class="pagination pagination-{{ size|default:'sm' }} mb-0">
            {# First Page Button #}
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" 
                       href="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}"
                       {% if htmx_target %}hx-get="?page=1{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}" hx-target="{{ htmx_target }}" hx-swap="outerHTML"{% endif %}
                       aria-label="{% trans 'First' %}">
                        {% if LANGUAGE_CODE == 'ar' %}
                            <i class="fas fa-angle-double-right"></i>
                        {% else %}
                            <i class="fas fa-angle-double-left"></i>
                        {% endif %}
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">
                        {% if LANGUAGE_CODE == 'ar' %}
                            <i class="fas fa-angle-double-right"></i>
                        {% else %}
                            <i class="fas fa-angle-double-left"></i>
                        {% endif %}
                    </span>
                </li>
            {% endif %}

            {# Previous Page Button #}
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link"
                       href="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}"
                       {% if htmx_target %}hx-get="?page={{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}" hx-target="{{ htmx_target }}" hx-swap="outerHTML"{% endif %}
                       aria-label="{% trans 'Previous' %}" rel="prev">
                        {% if LANGUAGE_CODE == 'ar' %}
                            <i class="fas fa-angle-right"></i>
                        {% else %}
                            <i class="fas fa-angle-left"></i>
                        {% endif %}
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">
                        {% if LANGUAGE_CODE == 'ar' %}
                            <i class="fas fa-angle-right"></i>
                        {% else %}
                            <i class="fas fa-angle-left"></i>
                        {% endif %}
                    </span>
                </li>
            {% endif %}

            {# Page Numbers - Show window of ±2 around current page, plus first and 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 or num >= start and num <= end %}
                        {% if num == page_obj.number %}
                            <li class="page-item active" aria-current="page">
                                <span class="page-link">{{ num }}</span>
                            </li>
                        {% else %}
                            <li class="page-item">
                                <a class="page-link"
                                   href="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}"
                                   {% if htmx_target %}hx-get="?page={{ num }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}" hx-target="{{ htmx_target }}" hx-swap="outerHTML"{% endif %}>
                                    {{ num }}
                                </a>
                            </li>
                        {% endif %}
                    {% elif num == 2 and start > 2 %}
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                    {% elif num == page_obj.paginator.num_pages|add:"-1" and end < page_obj.paginator.num_pages|add:"-1" %}
                        <li class="page-item disabled">
                            <span class="page-link">...</span>
                        </li>
                    {% endif %}
                {% endfor %}
            {% endwith %}

            {# Next Page Button #}
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link"
                       href="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}"
                       {% if htmx_target %}hx-get="?page={{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}" hx-target="{{ htmx_target }}" hx-swap="outerHTML"{% endif %}
                       aria-label="{% trans 'Next' %}" rel="next">
                        {% if LANGUAGE_CODE == 'ar' %}
                            <i class="fas fa-angle-left"></i>
                        {% else %}
                            <i class="fas fa-angle-right"></i>
                        {% endif %}
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">
                        {% if LANGUAGE_CODE == 'ar' %}
                            <i class="fas fa-angle-left"></i>
                        {% else %}
                            <i class="fas fa-angle-right"></i>
                        {% endif %}
                    </span>
                </li>
            {% endif %}

            {# Last Page Button #}
            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link"
                       href="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}"
                       {% if htmx_target %}hx-get="?page={{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value|urlencode }}{% endif %}{% endfor %}" hx-target="{{ htmx_target }}" hx-swap="outerHTML"{% endif %}
                       aria-label="{% trans 'Last' %}">
                        {% if LANGUAGE_CODE == 'ar' %}
                            <i class="fas fa-angle-double-left"></i>
                        {% else %}
                            <i class="fas fa-angle-double-right"></i>
                        {% endif %}
                    </a>
                </li>
            {% else %}
                <li class="page-item disabled">
                    <span class="page-link">
                        {% if LANGUAGE_CODE == 'ar' %}
                            <i class="fas fa-angle-double-left"></i>
                        {% else %}
                            <i class="fas fa-angle-double-right"></i>
                        {% endif %}
                    </span>
                </li>
            {% endif %}
        </ul>
    </nav>
</div>
{% endif %}