{% load translations %}
{% load i18n %}

<i class="fa fa-info-circle html-tooltip {{ group_css }}" data-toggle="tooltip" data-placement="bottom">
<div class="tooltip-content hidden">
  <p>{% trans "Progress bar color indicates translation state:" %}</p>
  <ul class="legend">
    <li>
{% with approved=100 %}
{% include "progress.html" %} {% trans "Approved" %}
{% endwith %}
    </li>
    <li>
{% with good=100 %}
{% include "progress.html" %} {% trans "Good" %}
{% endwith %}
    </li>
    <li>
{% with checks=100 %}
{% include "progress.html" %} {% trans "Failing checks" %}
{% endwith %}
    </li>
    <li>
{% with fuzzy=100 %}
{% include "progress.html" %} {% trans "Needs editing" %}
{% endwith %}
    </li>
  </ul>
</div></i>
