{% load i18n %}
<div >

    {% for kr in instance.key_result_id.all %}
    <div id="keyResultContainer{{kr.id}}">
        <span class="oh-user-panel oh-collapse-panel" data-type="user" >
            <div class="oh-profile oh-profile--md">
                <div class="oh-profile__avatar mr-1">
                    <img
                    src="https://ui-avatars.com/api/?name={{kr.key_result_id}}&background=random"
                    class="oh-profile__image"
                    alt="Baby C."
                    />
                </div>
                <span class="oh-profile__name oh-text--dark" title="{{kr.key_result_id}}"
                >{{kr|truncatechars:15}}</span
                >
            </div>
            {% if "perms.pms.delete_keyresult" %}
            <a
                hx-confirm="{% trans 'Are you sure want to remove this key result?' %}"
                hx-post="{% url 'key-result-remove' instance.id kr.id %}"
                title="{% trans "Remove" %}" hx-swap="outerHTML"
                hx-target="#keyResultContainer{{kr.id}}"
                class="oh-user-panel__remove"
                onclick="event.stopPropagation()"
            >
                <ion-icon name="close-outline"></ion-icon>
            </a>
            {% endif %}
        </span>
    </div>
    {% endfor %}
    <span class="count-span">{{instance.key_result_id.all|length}} {% trans "Key results" %}</span>

</div>