{# Status cards — grid of cards with status badge for each related entity #}
{# Contract: ~/.claude/skills/ux-architect/components/related-displays.md (UX-032) #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% for tab in group.tabs %}
{% if tab.visible | default(true) %}
<div class="mb-4">
  {% if group.tabs | length > 1 %}
  <h4 class="text-[13px] font-medium text-[hsl(var(--muted-foreground))] mb-2">{{ tab.label }}</h4>
  {% endif %}

  {% if tab.create_url %}
  <div class="flex justify-end mb-2">
    <a href="{{ tab.create_url }}?{{ tab.filter_field }}={{ detail.item.get('id', '') }}"
       class="h-7 px-2.5 rounded-[4px] bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] text-[12px] font-medium hover:brightness-110 transition-[filter] duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] inline-flex items-center"
       data-dazzle-action="{{ tab.entity_name }}.create">
      + New {{ tab.label }}
    </a>
  </div>
  {% endif %}

  {% if tab.rows %}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
    {% for item in tab.rows %}
    <div class="bg-[hsl(var(--card))] border border-[hsl(var(--border))] rounded-[6px] p-3 hover:shadow-[0_2px_8px_rgb(0_0_0/0.06)] cursor-pointer transition-shadow duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
         {% 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 %}>
      <div class="flex items-start justify-between gap-2">
        <div class="min-w-0">
          {% for col in tab.columns[:3] %}
          {% if loop.first %}
          <p class="text-[13px] font-medium text-[hsl(var(--foreground))] truncate">{{ item[col.key] | default("—") }}</p>
          {% else %}
          <p class="text-[12px] text-[hsl(var(--muted-foreground))] truncate">{{ item[col.key] | default("—") }}</p>
          {% endif %}
          {% endfor %}
        </div>
        {% for col in tab.columns if col.type == "badge" %}
        {% if loop.first %}
        <span class="shrink-0">{{ render_status_badge(value=item[col.key]) }}</span>
        {% endif %}
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="text-center py-6 text-[13px] text-[hsl(var(--muted-foreground))]">No {{ tab.label | lower }} found.</p>
  {% endif %}
</div>
{% endif %}
{% endfor %}