{# File list — compact rows for document/evidence entities.
   Contract: ~/.claude/skills/ux-architect/components/related-displays.md (UX-032)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-related-* classes
   (components/fragments.css). Shares the create-button + empty-state
   shape with the other related_* fragments. #}
{% 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-file-list">
    {% for item in tab.rows %}
    <div class="dz-related-file-row"
         {% 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 %}>
      <svg xmlns="http://www.w3.org/2000/svg" class="dz-related-file-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
      </svg>
      <div class="dz-related-file-text">
        {% for col in tab.columns[:2] %}
        {% if loop.first %}
        {% set _val = item[col.key] %}
        <p class="dz-related-file-primary">{% if _val is none %}—{% else %}{{ _val }}{% endif %}</p>
        {% else %}
        {% set _val = item[col.key] %}
        <p class="dz-related-file-secondary">{% if _val is none %}{% else %}{{ _val }}{% endif %}</p>
        {% endif %}
        {% endfor %}
      </div>
      {% for col in tab.columns if col.type == "date" %}
      {% if loop.first %}
      <span class="dz-related-file-date">{{ item[col.key] | dateformat }}</span>
      {% endif %}
      {% endfor %}
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="dz-related-empty">No {{ tab.label | lower }} found.</p>
  {% endif %}
</div>
{% endif %}
{% endfor %}