{#
/**
 * @file
 * FlowDrop Progress Bar Component
 *
 * A segmented progress bar for showing pipeline job progress.
 *
 * Available variables:
 * - segments: Array of progress segments
 *   - count: Number of items
 *   - status: Status (completed, running, pending, failed, cancelled)
 *   - label: Optional label
 * - total: Total items (calculated from segments if not provided)
 * - show_labels: Show count labels below (default: true)
 * - size: Bar size (sm, md, lg)
 * - animated: Show animation for running segments (default: true)
 */
#}

{% set size = size|default('md') %}
{% set show_labels = show_labels is defined ? show_labels : true %}
{% set animated = animated is defined ? animated : true %}

{# Calculate total if not provided #}
{% set calculated_total = 0 %}
{% for segment in segments %}
  {% set calculated_total = calculated_total + segment.count %}
{% endfor %}
{% set total_count = total|default(calculated_total) %}

<div class="fd-progress-bar fd-progress-bar--{{ size }}" role="progressbar" aria-valuenow="{{ calculated_total }}" aria-valuemin="0" aria-valuemax="{{ total_count }}">
  <div class="fd-progress-bar__track">
    {% for segment in segments %}
      {% if segment.count > 0 %}
        {% set width_percent = (segment.count / total_count) * 100 %}
        <div 
          class="fd-progress-bar__segment fd-progress-bar__segment--{{ segment.status }}{% if animated and segment.status == 'running' %} fd-progress-bar__segment--animated{% endif %}"
          style="width: {{ width_percent }}%"
          title="{{ segment.label|default(segment.status|capitalize) }}: {{ segment.count }}"
        ></div>
      {% endif %}
    {% endfor %}
  </div>
  
  {% if show_labels %}
    <div class="fd-progress-bar__labels">
      {% for segment in segments %}
        {% if segment.count > 0 %}
          <span class="fd-progress-bar__label fd-progress-bar__label--{{ segment.status }}">
            <span class="fd-progress-bar__label-dot"></span>
            <span class="fd-progress-bar__label-text">{{ segment.label|default(segment.status|capitalize) }}: {{ segment.count }}</span>
          </span>
        {% endif %}
      {% endfor %}
    </div>
  {% endif %}
</div>
