{% load i18n %}
<div>
    {% for manager in instance.managers.all %}
    <div id="managerContainer{{manager.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={{manager.get_full_name}}&background=random"
                    class="oh-profile__image"
                    alt="Baby C."
                    />
                </div>
                <span class="oh-profile__name oh-text--dark" title="{{manager}}"
                >{{manager.employee_first_name|truncatechars:15}}</span>
            </div>
            {% if perms.pms.change_objective %}
            <a
                hx-confirm="{% trans 'Are you sure want to remove this manager?' %}"
                hx-post="{% url 'objective-manager-remove' instance.id manager.id %}"
                title="{% trans "Remove" %}" hx-swap="outerHTML"
                hx-target="#managerContainer{{manager.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.managers.all|length}} {% trans "Managers" %}</span>

</div>