{#
/**
 * @file
 * Progress bar template.
 *
 * Available variables:
 * - progress: Progress percentage (0-100).
 * - status: Status string (pending, processing, completed, failed).
 * - status_class: CSS class for status.
 * - progress_width: Calculated width percentage.
 * - message: Optional status message.
 * - animated: Whether to show animation.
 */
#}
<div class="ffmpeg-progress {{ status_class }}{% if animated %} ffmpeg-progress--animated{% endif %}">
  <div class="visually-hidden" role="status" aria-live="polite" aria-atomic="true">
    {{ status }} {{ progress }}%
  </div>
  <div class="ffmpeg-progress-header">
    <span class="ffmpeg-progress-status">
      {% if status == 'none' %}
        {{ 'Not Started'|t }}
      {% elseif status == 'pending' %}
        {{ 'Pending'|t }}
      {% elseif status == 'processing' or status == 'converting' %}
        {{ 'Processing'|t }}
      {% elseif status == 'completed' %}
        {{ 'Completed'|t }}
      {% elseif status == 'failed' %}
        {{ 'Failed'|t }}
      {% else %}
        {{ status }}
      {% endif %}
    </span>
    <span class="ffmpeg-progress-text">{{ progress }}%</span>
  </div>

  <div class="ffmpeg-progress-track"
       role="progressbar"
       aria-valuemin="0"
       aria-valuemax="100"
       aria-valuenow="{{ progress }}"
       aria-valuetext="{{ status }} {{ progress }}%">
    <div class="ffmpeg-progress-fill" style="width: {{ progress_width }}%"></div>
  </div>

  {% if message %}
    <div class="ffmpeg-progress-message" role="status" aria-live="polite">{{ message }}</div>
  {% endif %}
</div>
