{% 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 "Untranslated" context "String state" %}" class="state-empty">{% icon "empty.svg" %}</span>
<span title="{% trans "Fails checks" context "String state" %}" class="red state-alert">{% icon "alert.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 "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>
