{% comment %}
Переиспользуемый компонент пагинации
Использование:
    {% include 'mainapp/components/_pagination.html' with page_obj=page_obj %}
    {% include 'mainapp/components/_pagination.html' with page_obj=page_obj show_info=True %}
{% endcomment %}

{% if page_obj %}
<nav aria-label="Page navigation" class="d-flex align-items-center">
    {% if page_obj.has_other_pages %}
    <ul class="pagination mb-0">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" onclick="updatePage(1)" href="javascript:void(0)" title="Первая">
                    <i class="bi bi-chevron-bar-left"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" onclick="updatePage({{ page_obj.previous_page_number }})" href="javascript:void(0)" title="Предыдущая">
                    <i class="bi bi-chevron-left"></i>
                </a>
            </li>
        {% endif %}

        {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
                <li class="page-item active">
                    <span class="page-link">{{ num }}</span>
                </li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" onclick="updatePage({{ num }})" href="javascript:void(0)">{{ num }}</a>
                </li>
            {% endif %}
        {% endfor %}

        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" onclick="updatePage({{ page_obj.next_page_number }})" href="javascript:void(0)" title="Следующая">
                    <i class="bi bi-chevron-right"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" onclick="updatePage({{ page_obj.paginator.num_pages }})" href="javascript:void(0)" title="Последняя">
                    <i class="bi bi-chevron-bar-right"></i>
                </a>
            </li>
        {% endif %}
    </ul>
    {% endif %}

    {% if show_info %}
    <div class="ms-3 text-muted small">
        {% if page_obj.has_other_pages %}
            {{ page_obj.start_index }}-{{ page_obj.end_index }} из {{ page_obj.paginator.count }}
        {% else %}
            {% if page_obj.paginator.count > 0 %}
                {{ page_obj.start_index }}-{{ page_obj.end_index }} из {{ page_obj.paginator.count }}
            {% else %}
                0 из 0
            {% endif %}
        {% endif %}
    </div>
    {% endif %}
</nav>
{% endif %}

<script>
function getAllFilterParams() {
    const filterForm = document.getElementById('filter-form');
    
    if (filterForm) {
        const formData = new FormData(filterForm);
        const params = new URLSearchParams();
        
        for (let [key, value] of formData.entries()) {
            if (key !== 'page') {
                params.append(key, value);
            }
        }
        const toolbarSearch = document.getElementById('toolbar-search');
        if (toolbarSearch && toolbarSearch.value.trim() !== '') {
            params.set('search', toolbarSearch.value);
        } else {
            params.delete('search');
        }
        
        return params.toString();
    } else {
        const currentParams = new URLSearchParams(window.location.search);
        currentParams.delete('page');
        return currentParams.toString();
    }
}

function updatePage(pageNumber) {
    const filterParams = getAllFilterParams();
    const urlParams = new URLSearchParams(filterParams);
    urlParams.set('page', pageNumber);
    window.location.search = urlParams.toString();
}
</script>