<mat-card class="assignment-top-container">
    <div mat-card-content class="assignment-top-container-content">
        <div class="assignment-header">
                <div *ngIf="hasPeople()" class="assigment-count" id="people-title">
                    {{ 'ADF_TASK_LIST.DETAILS.LABELS.PEOPLE' | translate }} {{ ' (' + people.length + ')' }}
                </div>
                <div *ngIf="!hasPeople()" class="assigment-count" id="no-people-label">
                    {{ 'ADF_TASK_LIST.DETAILS.PEOPLE.NONE' | translate }}
                </div>
                <div *ngIf="isEditMode()" class="add-people" (click)="onAddAssignement()">
                    <mat-icon class="adf-add-person-icon">person_add</mat-icon>
                </div>
            </div>
            <div class="assignment-container" *ngIf="showAssignment">
                <adf-people-search
                (searchPeople)="searchUser($event)"
                (success)="involveUser($event)"
                (closeSearch)="onCloseSearch()"
                [results]="peopleSearch$">
                    <ng-container people-search-title>{{ 'ADF_TASK_LIST.DETAILS.LABELS.ADD_PEOPLE' | translate }}</ng-container>
                    <ng-container people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_USER' | translate }}</ng-container>
                </adf-people-search>
            </div>
            <div class="assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
                <adf-people-list
                [users]="people"
                [actions]="isEditMode()"
                (clickAction)="onClickAction($event)">
                    <data-columns>
                        <data-column key="firstName">
                            <ng-template let-entry="$implicit">
                                <div *ngIf="!entry.row.obj.pictureId" class="adf-people-search-people-pic">
                                    {{getInitialUserName(entry.row.obj.firstName, entry.row.obj.lastName)}}</div>
                                <div>
                                    <img *ngIf="entry.row.obj.pictureId" class="people-img"
                                        [src]="peopleProcessService.getUserImage(entry.row.obj)"/>
                                </div>
                            </ng-template>
                        </data-column>
                        <data-column key="email" class="full-width">
                            <ng-template let-entry="$implicit">
                                <div class="people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
                                <div class="people-email">{{ entry.row.obj.email }}</div>
                                <div class="people-edit-label">can edit</div>
                            </ng-template>
                        </data-column>
                    </data-columns>
                </adf-people-list>
            </div>
    </div>
</mat-card>
