{#
Table component with dark theme styling.

Usage:
    {% from "components/table.html" import table, table_row %}

    {% call table(columns=["Name", "Status", "Actions"]) %}
        {% for item in items %}
        {{ table_row([item.name, item.status, actions_html]) }}
        {% endfor %}
    {% endcall %}
#}

{% macro table(columns, class="", id="") %}
<div class="overflow-x-auto {{ class }}" {% if id %}id="{{ id }}"{% endif %}>
    <table class="w-full text-sm">
        <thead class="text-gray-400 border-b border-dark-600">
            <tr>
                {% for col in columns %}
                <th class="text-left py-3 px-4 font-medium">{{ col }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody class="divide-y divide-dark-600">
            {{ caller() }}
        </tbody>
    </table>
</div>
{% endmacro %}

{% macro table_row(cells, class="", href=None) %}
<tr class="hover:bg-dark-600/50 transition-colors {{ class }}">
    {% for cell in cells %}
    <td class="py-3 px-4">
        {% if href and loop.first %}
        <a href="{{ href }}" class="text-blue-400 hover:text-blue-300">{{ cell }}</a>
        {% else %}
        {{ cell | safe }}
        {% endif %}
    </td>
    {% endfor %}
</tr>
{% endmacro %}

{% macro empty_row(colspan, message="No items found") %}
<tr>
    <td colspan="{{ colspan }}" class="py-8 text-center text-gray-400">
        {{ message }}
    </td>
</tr>
{% endmacro %}