{% load i18n %}
{% load icons %}

<span class="state-icon {{ state }}">
<span title="{% trans "Needs editing" context "String state" %}" class="state-need-edit">{% icon "need-edit.svg" %}</span>
<span title="{% trans "Read only" context "String state" %}" class="state-readonly">{% icon "read-only.svg" %}</span>
<span title="{% trans "Approved" context "String state" %}" class="green state-approved">{% icon "approved.svg" %}</span>
<span title="{% trans "Translated" context "String state" %}" class="green state-translated">{% icon "translated.svg" %}</span>
<span title="{% trans "Untranslated" context "String state" %}" class="state-empty">{% icon "empty.svg" %}</span>
<span
  {% if detail %}
    title="{% trans "Failed checks:" context "String state" %} {{ unit.active_checks|join:", "}}"
  {% else %}
    title="{% trans "Failed checks" context "String state" %}"
  {% endif %}
    class="red state-check">{% icon "alert.svg" %}</span>
<span
  {% if detail %}
    title="{% trans "Dismissed checks" context "String state" %} {{ unit.dismissed_checks|join:", "}}"
  {% else %}
    title="{% trans "Failed checks" context "String state" %}"
  {% endif %}
    class="gray state-dismissed-check">{% icon "alert.svg" %}</span>
<span title="{% trans "Commented" context "String state" %}" class="state-comment">{% icon "comment.svg" %}</span>
<span title="{% trans "Suggested" context "String state" %}" class="state-suggest">{% icon "suggest.svg" %}</span>
</span>
