{# Bar chart region — UX-035 adopter #9. #}
{% from 'macros/region_wrapper.html' import region_card %}
{% from 'macros/status_badge.html' import render_status_badge %}
{% call region_card(title) %}
  {% if 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 %}
  <div class="space-y-2 mt-2">
    {% for label, count in grouped.items() %}
    <div class="flex items-center gap-2">
      <span class="text-[11px] w-24 truncate text-right">
        {{ render_status_badge(value=label, size='sm') }}
      </span>
      <div class="flex-1 bg-[hsl(var(--muted))] rounded-full h-5 overflow-hidden">
        <div class="h-full rounded-full bg-[hsl(var(--primary))] transition-[width] duration-[200ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
             style="width: {{ (count / max_count * 100) | int }}%">
        </div>
      </div>
      <span class="text-[11px] font-mono text-[hsl(var(--muted-foreground))] w-8 text-right">{{ count }}</span>
    </div>
    {% endfor %}
  </div>
  <p class="text-[11px] text-[hsl(var(--muted-foreground))] mt-2">{{ 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="space-y-2 mt-2">
    {% for metric in metrics %}
    <div class="flex items-center gap-2">
      <span class="text-[11px] text-[hsl(var(--muted-foreground))] w-28 truncate text-right">{{ metric.label }}</span>
      <div class="flex-1 bg-[hsl(var(--muted))] rounded-full h-5 overflow-hidden">
        <div class="h-full rounded-full bg-[hsl(var(--primary))] transition-[width] duration-[200ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
             style="width: {{ (metric.value / max_val * 100) | int }}%">
        </div>
      </div>
      <span class="text-[11px] font-mono text-[hsl(var(--foreground))] w-10 text-right">{{ metric.value }}</span>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="dz-empty-dense text-[13px] text-[hsl(var(--muted-foreground))]" role="status">{{ empty_message | default("No data available.") }}</p>
  {% endif %}
{% endcall %}