<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-list__item-primary-content">
                <i class="material-icons mdl-list__item-icon">face</i>
                <span id="user-{{user.id}}">{{getDisplayUser(user)}}</span>
            </span>
            <a *ngIf="!readOnly" class="mdl-list__item-secondary-action">
                <i id="remove" class="material-icons people__icon"
                   (click)="removeInvolvedUser(user)">delete</i>
            </a>
        </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$">
        </activiti-people-search>
    </div>
    <div class="mdl-dialog__actions">
        <button type="button" id="close-people-dialog" (click)="cancel()" class="mdl-button close">Cancel</button>
    </div>
</dialog>
