<form #form="ngForm">
    <p-toolbar>
        <div class="ui-toolbar-group-left">
            Search Applicants
        </div>
    </p-toolbar>
    <p-card>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>Details</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <input [(ngModel)]="details" name="Details" fieldLabel="Details" type="text" pInputText class="ui-inputtext" placeholder="Search by applicant name or email">
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <p-button label="Search" (click)="getApplicants()" icon="ui-icon-search"></p-button>
        </div>
    </div>
    </p-card>
    <span *ngIf="showResult">
    <h4>Search Results ({{applicants.length}})</h4><br/>
    <p-table #table [columns]="cols" [value]="applicants" [paginator]="false" selectionMode="single" >
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of columns" [style.width]="col.width">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" [pSortableColumn]="col.field" [pSortableColumnDisabled]="col.noSort">
                    {{col.header}}
                    <p-sortIcon [field]="col.field" *ngIf="!col.noSort"></p-sortIcon>
                </th>
            </tr>
            <tr>
                <th *ngFor="let col of columns">
                    <input *ngIf="!col.noFilter" pInputText type="text" (input)="table.filter($event.target.value, col.field, 'contains')">
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            
            <tr>
                <ng-container *ngFor="let col of columns">
                    <td *ngIf="col.field != ''">
                        {{utilsService.getActualFieldValue(rowData, col.field)}}
                    </td>
                </ng-container>
                <td align="center">
                    <button pButton type="button" icon="ui-icon-edit" title="Edit"
                     [routerLink]="['/edit-applicant', rowData.ObjectID]"></button>
                </td>
            </tr>
        </ng-template>
        <ng-template pTemplate="emptymessage" let-columns >
            <tr>
                <td [attr.colspan]="columns.length">
                    No applicants found - please try again.
                </td>
            </tr>
        </ng-template>
    </p-table>
    </span>
    <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form>