<div class="search-text-header">
    <ng-content select="[people-search-title]"></ng-content>
</div>
<mat-form-field class="search-text-container">
	<input matInput placeholder="{{'ADF_TASK_LIST.PEOPLE.SEARCH_USER'|translate}}" type="text" id="userSearchText" [value]="" [formControl]="searchUser">
</mat-form-field>
<div class="search-list-container" id="search-people-list" *ngIf="hasUsers()">
    <adf-people-list
    [users]="users"
    (clickRow)="onRowClick($event)">
        <data-columns>
            <data-column key="firstName">
                <ng-template let-entry="$implicit">
                        <div *ngIf="!entry.row.obj.pictureId" class="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>
                </ng-template>
            </data-column>
        </data-columns>
    </adf-people-list>
</div>
<div class="search-list-action-container">
    <button mat-button type="button" id="close-people-search" (click)="closeSearchList()">
        {{'ADF_TASK_LIST.PEOPLE.DIALOG_CLOSE' | translate }}
    </button>
    <button mat-button type="button" id="add-people" (click)="involveUserAndClose()">
        <ng-content select="[people-search-action-label]"></ng-content>
    </button>
</div>
