{% load horizon %}

{% minifyspace %}
{% if text %}
  <div class="progress-text">
{% endif %}

<div class="progress tionix-progress{% if bars and bars.0.context %} tionix-progress-{{ bars.0.context }}{% endif %}">
  {% for this_bar in bars %}
    <div class="progress-bar
      {% if this_bar.context %}
        progress-bar-{{ this_bar.context }}
      {% endif %}
      {% if striped %}
        progress-bar-striped
        {% if animated %}
          active
        {% endif %}
      {% endif %}"
      role="progressbar"
      aria-valuenow="{{ this_bar.percent }}"
      aria-valuemin="{{ min_val }}"
      aria-valuemax="{{ max_val }}"
      style="width: {% if this_bar.percent|add:0 > 100 %}{{ 100 }}{% else %}{{ this_bar.percent }}{% endif %}%;{% if text %} min-width: 2em;{% endif %}">
      {% if bars|length == 1 %}
        <span class="sr-only">
          {{ this_bar.percent }}%
        </span>
        {% if this_bar.percent|add:0 >= 30 %}
          {{ this_bar.percent }}%
        {% endif %}
      {% endif %}
    </div>
    {% if bars|length == 1 and this_bar.percent|add:0 < 30 %}
      {{ this_bar.percent }}%
    {% endif %}
  {% endfor %}
  </div>

{% if text %}
    <span class="progress-bar-text">{{ text }}</span>
  </div>
{% endif %}
{% endminifyspace %}