{% load character_extras %}
<p id="states">
    États :
    {% with character.states.all as character_states %}
        {% for state in all_states %}
            <img src="{{ state.icon_url }}" alt="{{ state.name }}" height="25" width="25"
                 data-bs-toggle="tooltip"
                 data-bs-placement="top"
                 data-bs-title="{{ state.name }} : {{ state.description }}"
                 class="{% if state in character_states %}state-enabled{% endif %}"
                 {% if character|managed_by:user %}
                     role="button"
                     {% if state in character_states %}
                         hx-get="{% url "character:remove_state" pk=character.pk state_pk=state.pk %}"
                     {% else %}
                         hx-get="{% url "character:add_state" pk=character.pk state_pk=state.pk %}"
                     {% endif %}
                     hx-target="#states"
                     hx-swap="outerHTML"
                 {% endif %}
            >
        {% endfor %}
    {% endwith %}
</p>
