{# Table group — Alpine tab switching within a related group.
   Contract: ~/.claude/skills/ux-architect/components/related-displays.md (UX-032)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-related-* classes
   (components/fragments.css). Active-tab styling driven by .is-active
   modifier toggled by Alpine `:class="{...}"` — single token swap. #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% 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="dz-related-tabs" role="tablist">
    {% for tab in group.tabs %}
    {% if tab.visible | default(true) %}
    <button type="button"
            class="dz-related-tab"
            :class="{ 'is-active': activeTab === '{{ tab.tab_id }}' }"
            role="tab"
            :aria-selected="activeTab === '{{ tab.tab_id }}'"
            @click="activeTab = '{{ tab.tab_id }}'">
      {{ tab.label }}
      <span class="dz-related-tab-count">{{ 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="dz-related-table-card">
      {% if tab.create_url %}
      <div class="dz-related-table-create-row">
        <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="dz-related-create-button"
           data-dazzle-action="{{ tab.entity_name }}.create">
          + New {{ tab.label }}
        </a>
      </div>
      {% endif %}

      <div class="dz-related-table-scroll">
        <table class="dz-related-table" 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 {% 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" %}
                  {{ render_status_badge(value=item[col.key]) }}
                {% 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="dz-related-table-empty-cell">
                No {{ tab.label | lower }} found.
              </td>
            </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {% endif %}
  {% endfor %}
</div>