<span class="activiti-label mdl-badge" id="people-title"
      [attr.data-badge]="people?.length">{{ 'TASK_DETAILS.LABELS.PEOPLE' | translate }}</span>
<div *ngIf="!readOnly" id="addPeople" (click)="showDialog()" class="icon material-icons people__icon">add</div>
<div *ngIf="!readOnly" class="mdl-tooltip" data-mdl-for="addPeople">
    Add a person
</div>
<div class="menu-container" *ngIf="people?.length > 0">
    <ul class='mdl-list'>
        <li class="mdl-list__item" *ngFor="let user of people">
            <span class="mdl-chip mdl-chip--contact mdl-chip--deletable">
                <img class="mdl-chip__contact" [src]="iconImageUrl" />
                <span id="user-{{user.id}}" class="mdl-chip__text">{{getDisplayUser(user)}}</span>
                <a *ngIf="!readOnly" class="mdl-chip__action"><i id="remove-{{user.id}}" (click)="removeInvolvedUser(user)" class="material-icons people__icon">cancel</i></a>
            </span>
        </li>
    </ul>
</div>
<div *ngIf="people?.length === 0" id="no-people-label">
    {{ 'TASK_DETAILS.PEOPLE.NONE' | translate }}
</div>

<dialog class="mdl-dialog" id="add-people-dialog" #dialog>
    <h4 class="mdl-dialog__title" id="add-people-dialog-title">Involve User</h4>
    <div class="mdl-dialog__content add-people-dialog__content">
        <activiti-people-search (onSearch)="searchUser($event)"
                                (onRowClicked)="involveUser($event)"
                                [results]="peopleSearch$"
                                [iconImageUrl]="iconImageUrl" #activitipeoplesearch>
        </activiti-people-search>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" id="close-people-dialog" (click)="closeDialog()" class="mdl-button close">
            {{'PEOPLE.DIALOG_CLOSE' | translate }}
        </button>
    </div>
</dialog>
