{# Metrics region — UX-035 adopter #6.
   Contract: ~/.claude/skills/ux-architect/components/metrics-region.md (UX-042)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-metrics-* /
   .dz-metric-* classes (components/regions.css). Per-tile and per-
   delta-arrow tone tinting still routes through dz-tones.css keyed
   off data-dz-tone / data-dz-delta-tone (unchanged). #}
{% 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" data-dz-tile-count="{{ metrics | length }}">
    {% for metric in metrics %}
    {# Metric tile — padded soft-bg 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).

       v0.61.65 (#2) per-tile tone tint, v0.61.70 (#906) static-class
       fix. The neutral / no-tone case keeps the soft background as
       baseline; named tones get their tint from `dz-tones.css` keyed
       off `data-dz-tone`. #}
    {% set _tone = metric.tone | default('') %}
    <div class="dz-metric-tile"
         data-dz-metric-key="{{ metric.label | lower | replace(' ', '_') }}"{% if _tone %} data-dz-tone="{{ _tone }}"{% endif %}>
      <div class="dz-metric-label">{{ metric.label }}</div>
      <div class="dz-metric-value">{{ metric.value | metric_number }}</div>
      {# v0.61.25 (#884): period-over-period delta. positive_up → up=good (green); positive_down → up=bad. #}
      {% if metric.delta_direction is defined %}
        {% set _is_good = (metric.delta_direction == 'up' and metric.delta_sentiment == 'positive_up')
                       or (metric.delta_direction == 'down' and metric.delta_sentiment == 'positive_down') %}
        {% set _is_bad = (metric.delta_direction == 'down' and metric.delta_sentiment == 'positive_up')
                      or (metric.delta_direction == 'up' and metric.delta_sentiment == 'positive_down') %}
        {# v0.61.74 (#906 cleanup): the delta-arrow tone moved from a
           dynamic Tailwind class string (JIT-invisible to downstream
           consumers) to a `data-dz-delta-tone` attribute that
           `dz-tones.css` styles. Same approach as per-tile tones. #}
        {% set _delta_tone = 'positive' if _is_good else ('destructive' if _is_bad else 'neutral') %}
        {% set _arrow = '↑' if metric.delta_direction == 'up'
                  else ('↓' if metric.delta_direction == 'down' else '→') %}
        {% set _sign = '+' if metric.delta_direction == 'up' else '' %}
        <div class="dz-metric-delta"
             data-dz-delta-tone="{{ _delta_tone }}"
             data-dz-delta-direction="{{ metric.delta_direction }}"
             data-dz-delta-sentiment="{{ metric.delta_sentiment }}">
          <span aria-hidden="true">{{ _arrow }}</span>
          <span class="dz-metric-delta-value">{{ _sign }}{{ metric.delta }}</span>
          {% if metric.delta_pct is defined and metric.delta_pct != 0 %}
          <span class="dz-metric-delta-pct">({{ metric.delta_pct }}%)</span>
          {% endif %}
          <span class="dz-metric-delta-period">vs {{ metric.delta_period_label }}</span>
        </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="dz-empty-dense" role="status">{{ empty_message | default("No metrics available.") }}</p>
  {% endif %}

  {# v0.61.67 (#905): No items table here. `display: summary` and
     `display: metrics` are about the headline number — rendering an
     underlying rows table inside a hero tile bloats it with ~400px of
     vertical waste per card and crowds prototype-tight hero strips.
     Authors who want both metrics AND a list should declare two
     regions: one METRICS, one LIST. The runtime still fetches a
     paginated row count for `total` — but it is never rendered here. #}
{% endcall %}