{# Tab data fragment — data table for multi-source tab panels, no card wrapper.

   Contract: ~/.claude/skills/ux-architect/components/tab-data-region.md (UX-057)

   Used once per source entity inside a multi-source workspace_tabbed_region.
   Distinct from list.html — no card wrapper (the wrapper lives one level up in
   workspace-tabbed-region chrome). HTMX target convention:
   #tab-{region_name}-{source_entity|lower}. Endpoint is
   /api/workspaces/{ws}/regions/{region}/{source}.

   v0.62 CSS refactor: inline Tailwind → semantic .dz-tab-data-* classes
   (components/regions.css). Per-row attention tint via data-dz-attn
   attribute (critical / warning / notice) instead of a 3-branch ternary
   emitting different `bg-[...]` Tailwind class strings. #}
{% from 'macros/status_badge.html' import render_status_badge %}
<div class="dz-tab-data">
{% if filter_columns %}
<div class="dz-tab-data-filterbar filter-bar">
  {% for fc in filter_columns %}
  <select class="dz-tab-data-filter-select"
          hx-get="{{ endpoint }}" hx-target="#tab-{{ region_name }}-{{ source_entity | lower }}" hx-swap="innerHTML"
          hx-include="closest .filter-bar" name="filter_{{ fc.key }}">
    <option value="">All {{ fc.label }}</option>
    {% for opt in fc.options %}
    <option value="{{ opt }}" {% if active_filters.get(fc.key) == opt %}selected{% endif %}>{{ opt | humanize }}</option>
    {% endfor %}
  </select>
  {% endfor %}
</div>
{% endif %}
{% if items %}
<div class="dz-tab-data-scroll">
  <table class="dz-tab-data-table">
    <thead>
      <tr>
        {% for col in columns %}
        <th>
          {% if col.sortable %}
          <a hx-get="{{ endpoint }}?sort={{ col.key }}&amp;dir={% if sort_field == col.key and sort_dir == 'asc' %}desc{% else %}asc{% endif %}"
             hx-target="#tab-{{ region_name }}-{{ source_entity | lower }}" hx-swap="innerHTML"
             class="dz-tab-data-sort-link">
            {{ col.label }}
            {% if sort_field == col.key %}<span>{{ "▼" if sort_dir == "desc" else "▲" }}</span>{% endif %}
          </a>
          {% else %}
          {{ col.label }}
          {% endif %}
        </th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
      {% set attn = item.get("_attention") if item.get is defined else none %}
      <tr class="dz-tab-data-row{% if action_url %} is-clickable{% endif %}"
          {% if attn %}data-dz-attn="{{ attn.level }}" title="{{ attn.message }}"{% endif %}
          {% if action_url %}hx-get="{{ action_url | replace('{id}', item[action_id_field|default('id')]|resolve_fk_id) }}"
          hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"{% endif %}>
        {% for col in 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] | timeago }}
          {% elif col.type == "currency" %}
            {{ item[col.key] | currency }}
          {% elif col.type == "ref" %}
            {% set ref = item[col.key] %}
            {% set display_name = item.get(col.key ~ "_display", "") %}
            {% if ref is mapping %}
              {% set display_name = display_name or (ref | ref_display) %}
              {% if col.ref_route and ref.get("id") %}
                <a href="{{ col.ref_route | replace('{id}', ref.get('id', '')|string) }}" class="dz-tab-data-ref-link" onclick="event.stopPropagation()">{{ display_name }}</a>
              {% else %}{{ display_name }}{% endif %}
            {% elif display_name %}{{ display_name }}{% elif ref %}{{ ref }}{% else %}-{% endif %}
          {% else %}
            {{ item[col.key] | default("") | truncate_text }}
          {% endif %}
        </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% if total > items | length %}
<p class="dz-tab-data-overflow">Showing {{ items | length }} of {{ total }}</p>
{% endif %}
{% else %}
<p class="dz-empty-dense" role="status">{{ empty_message | default("No data available.") }}</p>
{% endif %}
</div>