{# Metrics region — UX-035 adopter #6.
   Contract: ~/.claude/skills/ux-architect/components/metrics-region.md (UX-042) #}
{% from 'macros/status_badge.html' import render_status_badge %}
{% from 'macros/region_wrapper.html' import region_card %}
{% call region_card(title) %}
  {# Metrics tiles grid — responsive 1/2/4 column layout #}
  {% if metrics %}
  <div class="dz-metrics-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3"
       data-dz-tile-count="{{ metrics | length }}">
    {% for metric in metrics %}
    {# Metric tile — padded soft-bg pad only, no border. Enclosing
       dashboard slot owns all card chrome; a border here reads as a
       tile-card inside the dashboard card (issue #794 second
       follow-up). #}
    <div class="dz-metric-tile p-3 rounded-[4px] bg-[hsl(var(--muted)/0.4)]"
         data-dz-metric-key="{{ metric.label | lower | replace(' ', '_') }}">
      <div class="text-[11px] text-[hsl(var(--muted-foreground))] tracking-tight">{{ metric.label }}</div>
      <div class="text-[18px] font-semibold text-[hsl(var(--foreground))] mt-0.5 tabular-nums">{{ metric.value | metric_number }}</div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="dz-empty-dense text-[13px] text-[hsl(var(--muted-foreground))]" role="status">{{ empty_message | default("No metrics available.") }}</p>
  {% endif %}

  {% if items and columns %}
  <div class="h-px bg-[hsl(var(--border))] my-3"></div>
  <div class="overflow-x-auto">
    <table class="w-full">
      <thead>
        <tr class="bg-[hsl(var(--muted)/0.3)] border-b border-[hsl(var(--border))]">
          {% for col in columns %}
          <th class="text-left text-[12px] font-medium text-[hsl(var(--muted-foreground))] px-3 py-2 tracking-tight">{{ col.label }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        {% set attn = item.get("_attention") if item.get is defined else none %}
        <tr class="border-b border-[hsl(var(--border))] last:border-0 transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]
          {% if attn %}
            {% if attn.level == 'critical' %}bg-[hsl(var(--destructive)/0.08)]{% endif %}
            {% if attn.level == 'warning' %}bg-[hsl(var(--warning)/0.08)]{% endif %}
            {% if attn.level == 'notice' %}bg-[hsl(var(--primary)/0.06)]{% endif %}
          {% endif %}
          {% if action_url %}cursor-pointer hover:bg-[hsl(var(--muted)/0.5)]{% endif %}"
            {% if attn %}title="{{ attn.message }}"{% endif %}
            {% if action_url %}hx-get="{{ action_url | replace('{id}', item[action_id_field|default('id')]|string) }}"
            hx-target="#dz-detail-drawer-content" hx-swap="innerHTML"{% endif %}>
          {% for col in columns %}
          <td class="text-[13px] text-[hsl(var(--foreground))] px-3 py-2">
            {% 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 }}
            {% 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="text-[hsl(var(--primary))] hover:underline"
                     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>
  {% endif %}
{% endcall %}