{% comment %}
Reusable horizontal bar chart using Bootstrap progress bars.

Context: bars - list of dicts with keys: label, count, pct, color
{% endcomment %}
{% load static %}
{% if bars %}
{% for bar in bars %}
<div class="d-flex align-items-center mb-2">
  <span class="text-end me-2 ssl-chart-label">{{ bar.label }}</span>
  <div class="flex-grow-1">
    <div class="progress ssl-chart-bar">
      <div class="progress-bar {{ bar.color }}" role="progressbar" style="width: {{ bar.pct }}%;"
           aria-valuenow="{{ bar.count }}" aria-valuemin="0" aria-valuemax="100">
        {% if bar.pct > 15 %}{{ bar.count }}{% endif %}
      </div>
    </div>
  </div>
  {% if bar.pct <= 15 %}<span class="ms-2 fw-bold ssl-chart-value">{{ bar.count }}</span>{% endif %}
</div>
{% endfor %}
{% else %}
<p class="text-muted mb-0">No data available.</p>
{% endif %}