{#
Pagination component with HTMX infinite scroll support.

Usage:
    {% from "components/pagination.html" import infinite_scroll_trigger, page_links %}

    {# Infinite scroll (HTMX) #}
    {{ infinite_scroll_trigger(url="/items?page=2", colspan=3, has_more=True) }}

    {# Traditional pagination #}
    {{ page_links(current_page=1, total_pages=5, base_url="/items") }}
#}

{% macro infinite_scroll_trigger(url, colspan=1, has_more=True, target=None) %}
{% if has_more %}
<tr hx-get="{{ url }}"
    hx-trigger="revealed"
    hx-swap="afterend"
    {% if target %}hx-target="{{ target }}"{% endif %}
    class="htmx-indicator-row">
    <td colspan="{{ colspan }}" class="text-center py-4">
        <span class="text-gray-400 htmx-indicator">
            <svg class="animate-spin h-5 w-5 inline mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Loading more...
        </span>
    </td>
</tr>
{% endif %}
{% endmacro %}

{% macro page_links(current_page, total_pages, base_url, class="") %}
<nav class="flex items-center justify-center space-x-2 {{ class }}">
    {# Previous button #}
    {% if current_page > 1 %}
    <a href="{{ base_url }}?page={{ current_page - 1 }}"
       class="px-3 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors">
        &larr; Previous
    </a>
    {% else %}
    <span class="px-3 py-2 rounded-lg bg-dark-700 text-gray-500 cursor-not-allowed">
        &larr; Previous
    </span>
    {% endif %}

    {# Page numbers #}
    <div class="flex items-center space-x-1">
        {% for page in range(1, total_pages + 1) %}
            {% if page == current_page %}
            <span class="px-3 py-2 rounded-lg bg-blue-600 text-white">{{ page }}</span>
            {% elif page == 1 or page == total_pages or (page >= current_page - 2 and page <= current_page + 2) %}
            <a href="{{ base_url }}?page={{ page }}"
               class="px-3 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors">
                {{ page }}
            </a>
            {% elif page == current_page - 3 or page == current_page + 3 %}
            <span class="px-2 text-gray-500">...</span>
            {% endif %}
        {% endfor %}
    </div>

    {# Next button #}
    {% if current_page < total_pages %}
    <a href="{{ base_url }}?page={{ current_page + 1 }}"
       class="px-3 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors">
        Next &rarr;
    </a>
    {% else %}
    <span class="px-3 py-2 rounded-lg bg-dark-700 text-gray-500 cursor-not-allowed">
        Next &rarr;
    </span>
    {% endif %}
</nav>
{% endmacro %}

{% macro page_info(page, limit, total) %}
<div class="text-sm text-gray-400">
    Showing {{ (page - 1) * limit + 1 }}-{{ [page * limit, total] | min }} of {{ total }}
</div>
{% endmacro %}