{% macro render_progress_bar(value, label=None, state=None) %}
{% set computed_state = state if state else
    ('danger' if value >= 90 else ('warning' if value >= 70 else 'safe')) %}
{% set fill_color = '#cf222e' if computed_state == 'danger'
    else ('#9a6700' if computed_state == 'warning' else '#1a7f37') %}
{% set display_pct = value if value <= 100 else 100 %}
<div class="fin-progress-bar fin-progress-bar-{{ computed_state }}"
     {% if label %}aria-label="{{ label }}: {{ value }}%"{% endif %}
     style="margin-bottom: 12px;">
  {% if label %}
    <div style="display: flex; justify-content: space-between; font-size: 13px;
                color: #1f2328; margin-bottom: 4px;">
      <span>{{ label }}</span>
      <span style="color: {% if value > 100 %}#cf222e{% else %}#636c76{% endif %};">
        {{ value }}%
      </span>
    </div>
  {% endif %}
  <div role="progressbar"
       aria-valuenow="{{ value }}"
       aria-valuemin="0"
       aria-valuemax="100"
       style="height: 8px; background: #eaeef2; border-radius: 4px; overflow: hidden;
              {% if value > 100 %}border: 1px solid #cf222e;{% endif %}">
    <div style="height: 100%; width: {{ display_pct }}%; background: {{ fill_color }};
                border-radius: 4px; transition: width 0.3s ease;"></div>
  </div>
</div>
{% endmacro %}