{% load fusion_tags %}
{% if results %}
<div data-result-count="{{ results|length }}" class="overflow-auto max-h-[calc(100vh-200px)]">
<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 %}">{{ row|get_item:col|default_if_none:"—" }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
<div class="flex items-center justify-between border-t border-slate-200 px-3 py-2 text-xs text-slate-500">
    <span>{{ results|length }} row{{ results|length|pluralize }}</span>
</div>
{% else %}
<div class="p-12 text-center">
    <p class="text-sm text-slate-400">No rows. Try removing a filter.</p>
</div>
{% endif %}