{% load govplan %}

{% get_plan_progress object_list as progress %}

<div class="d-flex align-items-center">
  <span class="text-body-secondary{% if not instance.extra_classes or "progress-lg" not in instance.extra_classes %} small{% endif %}">{{ progress.count }} Vorhaben</span>
  <div class="flex-grow-1 ms-2">
    <div class="progress" {% if "progress-lg" in instance.extra_classes %}style="height: 1.5rem;"{% endif %}>
      {% for section in progress.sections %}
        <div class="progress-bar {% if section.css_class == 'light' %}bg-dark bg-opacity-10{% else %}bg-{{ section.css_class }}{% endif %}" role="progressbar" style="width: {{ section.css_percentage }}%;" aria-valuenow="{{ section.css_percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ section.percentage }}% {{ section.label }}" title="{{ section.percentage }}% {{ section.label }}" data-bs-toggle="tooltip" data-placement="top">
        </div>
      {% endfor %}
    </div>
  </div>
</div>

