{# Table group — Alpine tab switching within a related group #}
{% set first_tab_id = group.tabs[0].tab_id if group.tabs else '' %}
<div x-data="{ activeTab: '{{ first_tab_id }}' }">
  {% if group.tabs | length > 1 %}
  <div class="tabs tabs-bordered" role="tablist">
    {% for tab in group.tabs %}
    {% if tab.visible | default(true) %}
    <button class="tab"
            :class="activeTab === '{{ tab.tab_id }}' && 'tab-active'"
            role="tab"
            :aria-selected="activeTab === '{{ tab.tab_id }}'"
            @click="activeTab = '{{ tab.tab_id }}'">
      {{ tab.label }}
      <span class="badge badge-sm ml-1">{{ tab.total }}</span>
    </button>
    {% endif %}
    {% endfor %}
  </div>
  {% endif %}

  {% for tab in group.tabs %}
  {% if tab.visible | default(true) %}
  <div {% if group.tabs | length > 1 %}x-show="activeTab === '{{ tab.tab_id }}'"{% endif %} role="tabpanel">
    <div class="card bg-base-100 shadow-sm mt-2">
      <div class="card-body p-0">
        {% if tab.create_url %}
        <div class="flex justify-end p-3 pb-0">
          <a href="{{ tab.create_url }}?{{ tab.filter_field }}={{ detail.item.get('id', '') }}{% if tab.filter_type_field %}&amp;{{ tab.filter_type_field }}={{ tab.filter_type_value }}{% endif %}"
             class="btn btn-primary btn-sm"
             data-dazzle-action="{{ tab.entity_name }}.create">
            + New {{ tab.label }}
          </a>
        </div>
        {% endif %}

        <div class="overflow-x-auto">
          <table class="table table-zebra w-full" data-entity="{{ tab.entity_name }}">
            <thead>
              <tr>
                {% for col in tab.columns %}
                <th scope="col">{{ col.label }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% if tab.rows %}
              {% for item in tab.rows %}
              <tr class="hover cursor-pointer"
                  {% if tab.detail_url_template %}
                  hx-get="{{ tab.detail_url_template.replace('{id}', item.id | string) }}"
                  hx-push-url="true"
                  hx-target="body"
                  hx-swap="innerHTML"
                  {% endif %}>
                {% for col in tab.columns %}
                <td>
                  {% if col.type == "badge" %}
                    <span class="badge {{ item[col.key] | badge_class }}">{{ item[col.key] | default("") }}</span>
                  {% elif col.type == "bool" %}
                    {{ item[col.key] | bool_icon }}
                  {% elif col.type == "date" %}
                    {{ item[col.key] | dateformat }}
                  {% elif col.type == "currency" %}
                    {{ item[col.key] | currency(col.currency_code or "GBP") }}
                  {% else %}
                    {{ item[col.key] | default("") | truncate_text }}
                  {% endif %}
                </td>
                {% endfor %}
              </tr>
              {% endfor %}
              {% else %}
              <tr>
                <td colspan="{{ tab.columns | length }}" class="text-center py-8 text-base-content/50">
                  No {{ tab.label | lower }} found.
                </td>
              </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
  {% endfor %}
</div>