{# Bar chart region — UX-035 adopter #9.
   Contract: ~/.claude/skills/ux-architect/components/bar-chart-region.md (UX-065)

   v0.62 CSS refactor: inline Tailwind → semantic .dz-bar-chart-* classes
   (components/regions.css). Three branches (per-bucket aggregate, items+
   group_by client-side rollup, metrics fallback) all share the same row
   shape: label / track / value. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% from 'macros/status_badge.html' import render_status_badge %}
{% call region_card(title) %}
<div class="dz-bar-chart-region">
  {% if bucketed_metrics %}
  {# Per-bucket aggregate (#847): the runtime evaluated the aggregate
     once per group_by value, so each bar shows the true distribution
     value (e.g. count of Manuscripts per grade band) instead of how
     many source rows landed in each bucket. #}
  {% set max_val = bucketed_metrics | map(attribute='value') | max if bucketed_metrics else 1 %}
  {% set max_val = max_val if max_val > 0 else 1 %}
  <div class="dz-bar-chart-bars">
    {% for bucket in bucketed_metrics %}
    <div class="dz-bar-chart-row">
      <span class="dz-bar-chart-label">
        {{ render_status_badge(value=bucket.label, size='sm') }}
      </span>
      <div class="dz-bar-chart-track">
        <div class="dz-bar-chart-fill" style="width: {{ (bucket.value / max_val * 100) | int }}%"></div>
      </div>
      <span class="dz-bar-chart-value">{{ bucket.value }}</span>
    </div>
    {% endfor %}
  </div>
  {% elif items and group_by %}
  {% set grouped = {} %}
  {% for item in items %}
  {% set key = item[group_by] | default("Unknown") %}
  {% if key in grouped %}
  {% set _ = grouped.update({key: grouped[key] + 1}) %}
  {% else %}
  {% set _ = grouped.update({key: 1}) %}
  {% endif %}
  {% endfor %}
  {% set max_count = grouped.values() | max if grouped.values() | list else 1 %}
  {% set max_count = max_count if max_count > 0 else 1 %}
  <div class="dz-bar-chart-bars">
    {% for label, count in grouped.items() %}
    <div class="dz-bar-chart-row">
      <span class="dz-bar-chart-label">
        {{ render_status_badge(value=label, size='sm') }}
      </span>
      <div class="dz-bar-chart-track">
        <div class="dz-bar-chart-fill" style="width: {{ (count / max_count * 100) | int }}%"></div>
      </div>
      <span class="dz-bar-chart-value">{{ count }}</span>
    </div>
    {% endfor %}
  </div>
  <p class="dz-bar-chart-summary">{{ total }} total</p>
  {% elif metrics %}
  {# Fallback: render aggregate metrics as bars #}
  {% set max_val = metrics | map(attribute='value') | max if metrics else 1 %}
  {% set max_val = max_val if max_val > 0 else 1 %}
  <div class="dz-bar-chart-bars">
    {% for metric in metrics %}
    <div class="dz-bar-chart-row">
      <span class="dz-bar-chart-label is-wide">{{ metric.label }}</span>
      <div class="dz-bar-chart-track">
        <div class="dz-bar-chart-fill" style="width: {{ (metric.value / max_val * 100) | int }}%"></div>
      </div>
      <span class="dz-bar-chart-value is-wide">{{ metric.value }}</span>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="dz-empty-dense" role="status">{{ empty_message | default("No data available.") }}</p>
  {% endif %}
</div>
{% endcall %}