{# Reusable full-width styled table with alternating rows. #}

{% macro table_header(headers) %}
<thead>
    <tr class="bg-slate-50 dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700">
        {% for h in headers %}
        <th class="px-4 py-2.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">{{ h }}</th>
        {% endfor %}
    </tr>
</thead>
{% endmacro %}

{% macro table_body() %}
<tbody class="divide-y divide-slate-100 dark:divide-slate-800">
{{ caller() }}
</tbody>
{% endmacro %}

{% macro table_row() %}
<tr class="even:bg-slate-50/50 dark:even:bg-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors">
{{ caller() }}
</tr>
{% endmacro %}

{% macro table_cell(class='') %}
<td class="px-4 py-2.5 {{ class }}">{{ caller() }}</td>
{% endmacro %}

{% macro styled_table() %}
<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
{{ caller() }}
        </table>
    </div>
</div>
{% endmacro %}