{% load fusion_tags %}
<div data-result-count="{{ results|length }}"
     data-total="{{ total|default:0 }}"
     data-page="{{ page|default:1 }}"
     data-total-pages="{{ total_pages|default:1 }}"
     class="overflow-auto max-h-[calc(100vh-200px)]">
{% if results %}
<table class="fa-table">
    <thead>
        <tr>
            {% for col in columns %}
            <th class="{% if col in numeric_cols %}text-right{% endif %}">{{ headers|index:forloop.counter0|default:col }}</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
        {% for row in results %}
        <tr>
            {% for col in columns %}
            <td class="{% if col in numeric_cols %}fa-num{% endif %}">{% fmt_cell row col formats %}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>
{% else %}
<div class="p-12 text-center text-sm text-slate-400">No rows. Try removing a filter.</div>
{% endif %}
</div>
<div class="flex items-center justify-between border-t border-slate-200 px-3 py-2 text-xs text-slate-500 gap-2">
    <span>
        {% if total %}
            {{ total }} total row{{ total|pluralize }}
            {% if total_pages and total_pages > 1 %}
                — page {{ page }} of {{ total_pages }}
            {% endif %}
        {% else %}
            {{ results|length }} row{{ results|length|pluralize }}
        {% endif %}
    </span>
    {% if total_pages and total_pages > 1 %}
    <div class="flex items-center gap-1" data-pagination>
        <button data-page-action="first" class="fa-btn fa-btn-ghost fa-btn-sm" {% if page <= 1 %}disabled{% endif %}>« First</button>
        <button data-page-action="prev" class="fa-btn fa-btn-ghost fa-btn-sm" {% if page <= 1 %}disabled{% endif %}>‹ Prev</button>
        <button data-page-action="next" class="fa-btn fa-btn-ghost fa-btn-sm" {% if page >= total_pages %}disabled{% endif %}>Next ›</button>
        <button data-page-action="last" class="fa-btn fa-btn-ghost fa-btn-sm" {% if page >= total_pages %}disabled{% endif %}>Last »</button>
        <input type="number" data-page-jump min="1" max="{{ total_pages }}" value="{{ page }}" aria-label="Jump to page" class="fa-input w-16 text-xs ml-1">
        <button data-page-action="jump" class="fa-btn fa-btn-ghost fa-btn-sm">Go</button>
    </div>
    {% endif %}
</div>