{% load i18n %}
<div >
    {% for manager in instance.manager.all %}
    <div id="meetingManagerContainer{{manager.id}}-{{instance.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.get_full_name}}"
                >{{manager.get_full_name|truncatechars:15}}</span
                >
            </div>
            {% if perms.pms.add_meetings %}
            <button
                hx-confirm="{% trans 'Are you sure to remove this manager?' %}"
                hx-post="{% url 'meeting-manager-remove' instance.id manager.id %}"
                title="{% trans "Remove" %}" hx-swap="outerHTML"
                hx-target="#meetingManagerContainer{{manager.id}}-{{instance.id}}"
                class="oh-user-panel__remove"
                onclick="event.stopPropagation()"
            >
                <ion-icon name="close-outline"></ion-icon>
        </button>
            {% endif %}
        </span>
    </div>
    {% endfor %}
    <span class="count-span">{{instance.manager.all|length}} {% trans "Managers" %}</span>
</div>