{#
  Coffee House Data Table — Responsive table wrapper with zebra striping and empty state.

  Usage:
    {% set table_headers = ["Name", "Email", "Role"] %}
    {% set table_empty_message = "No users found" %}
    {% set table_rows = users %}
    {% include "components/data_table.html" %}

  Or use as a wrapper:
    {% call(slot) data_table_wrap(headers=["Name","Role"], empty=not users, empty_msg="No users") %}
      {% for u in users %}
      <tr><td>{{ u.name }}</td><td>{{ u.role }}</td></tr>
      {% endfor %}
    {% endcall %}

  Expected context (simple mode):
    - table_headers: list[str] — column headers
    - table_empty: bool — whether to show empty state
    - table_empty_message: str (optional, default: "No data found")
    - table_empty_cta_label: str (optional) — CTA button text
    - table_empty_cta_href: str (optional) — CTA button link
#}
<div class="card bg-base-100 shadow-sm card-table">
    <div class="overflow-x-auto">
        <table class="table table-zebra">
            {% if table_headers is defined and table_headers %}
            <thead>
                <tr>
                    {% for header in table_headers %}
                    <th scope="col">{{ header }}</th>
                    {% endfor %}
                </tr>
            </thead>
            {% endif %}
            <tbody>
                {% if table_empty is defined and table_empty %}
                <tr>
                    <td colspan="{{ table_headers | length if table_headers is defined else 1 }}" class="text-center py-8">
                        <div class="ch-empty-state">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
                            </svg>
                            <p class="text-base-content/50">{{ table_empty_message | default("No data found") }}</p>
                            {% if table_empty_cta_label is defined and table_empty_cta_label %}
                            <a href="{{ table_empty_cta_href | default('#') }}" class="btn btn-primary btn-sm mt-3">{{ table_empty_cta_label }}</a>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% else %}
                {% block table_body %}{% endblock %}
                {% endif %}
            </tbody>
        </table>
    </div>
</div>