{# Data Table Component
   Usage: {% include "components/data_table.html" with table_id="users-table" %}
   Define table content via block or pass rows context.
#}
<div class="overflow-hidden rounded-xl bg-[--card] border border-[--border] shadow-sm">
    <div class="overflow-x-auto">
        <table id="{{ table_id|default('data-table') }}" class="min-w-full divide-y divide-[--border]">
            <thead class="bg-[--muted]/30">
                <tr>
                    {% for header in headers %}
                    <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-[--muted-foreground] uppercase tracking-wider">{{ header }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody class="divide-y divide-[--border]">
                {% block table_body %}
                {% if rows %}
                    {% for row in rows %}
                    <tr class="hover:bg-[--muted]/20 transition-colors">
                        {% for cell in row %}
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-[--foreground]">{{ cell }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="{{ headers|length|default:3 }}" class="px-6 py-12 text-center text-sm text-[--muted-foreground]">No data available</td>
                    </tr>
                {% endif %}
                {% endblock %}
            </tbody>
        </table>
    </div>
</div>