{# Status cards — grid of cards with status badge for each related entity.
   Contract: ~/.claude/skills/ux-architect/components/related-displays.md (UX-032)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-related-status-* classes
   (components/fragments.css). #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% for tab in group.tabs %}
{% if tab.visible | default(true) %}
<div class="dz-related-group">
  {% if group.tabs | length > 1 %}
  <h4 class="dz-related-tab-label">{{ tab.label }}</h4>
  {% endif %}

  {% if tab.create_url %}
  <div class="dz-related-create-row">
    <a href="{{ tab.create_url }}?{{ tab.filter_field }}={{ detail.item.get('id', '') }}"
       class="dz-related-create-button"
       data-dazzle-action="{{ tab.entity_name }}.create">
      + New {{ tab.label }}
    </a>
  </div>
  {% endif %}

  {% if tab.rows %}
  <div class="dz-related-status-grid">
    {% for item in tab.rows %}
    <div class="dz-related-status-card"
         {% 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="dz-related-status-card-row">
        <div class="dz-related-status-card-text">
          {% for col in tab.columns[:3] %}
          {% set _val = item[col.key] %}
          {% if loop.first %}
          <p class="dz-related-status-card-primary">{% if _val is none %}—{% else %}{{ _val }}{% endif %}</p>
          {% else %}
          <p class="dz-related-status-card-secondary">{% if _val is none %}—{% else %}{{ _val }}{% endif %}</p>
          {% endif %}
          {% endfor %}
        </div>
        {% for col in tab.columns if col.type == "badge" %}
        {% if loop.first %}
        <span class="dz-related-status-card-badge">{{ render_status_badge(value=item[col.key]) }}</span>
        {% endif %}
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="dz-related-empty">No {{ tab.label | lower }} found.</p>
  {% endif %}
</div>
{% endif %}
{% endfor %}