{# do not show if : All in one or is not Y or on aCompleted #}
{% if aSurveyInfo.showprogress == 'Y' and aSurveyInfo.format != 'A' and not aSurveyInfo.aCompleted %}
    <!-- Top container -->
    <div class="{{ aSurveyInfo.class.topcontainer  }} space-col"  {{ aSurveyInfo.attr.topcontainer  }} >
        <div class="{{ aSurveyInfo.class.topcontent  }} container-fluid" {{ aSurveyInfo.attr.topcontent  }} >
            {% set progressValue  = ( aSurveyInfo.progress.total > 0 ) ? intval( (aSurveyInfo.progress.currentstep - 1) / aSurveyInfo.progress.total * 100 ) : 0 %}
      {% if progressValue|number_format > 66 %}
        {% set progressClass = 'high' %}
      {% elseif progressValue|number_format > 33 %}
        {% set progressClass = 'medium' %}
      {% else %}
        {% set progressClass = 'low' %}
      {% endif %}
            <div class="sr-only">{{ sprintf(gT('You have completed %s%% of this survey'),progressValue) }}</div>
                <div class="{{ aSurveyInfo.class.progress  }}" {{ aSurveyInfo.attr.progress  }}  aria-hidden="true">
                    <div class="{{ aSurveyInfo.class.progressbar  }} {{ progressClass }}" {{ aSurveyInfo.attr.progressbar  }} style="min-width: 2em; width: {{ progressValue }}%;">
                        {{ progressValue }}%
                    </div>
                </div>
        </div>
    </div>
{% endif %}

.progress-bar.low {
  background-color: #FF0000;
}
.progress-bar.medium {
  background-color: #FFA500;
}
.progress-bar.high {
  background-color: #008000;
}