<p-toolbar>
    <div class="ui-toolbar-group-left">
        Edit Applicant
    </div>
    <div  class="ui-toolbar-group-right ui-fluid">
        <p-splitButton label="Save" icon="ui-icon-save" [model]="saveDropdown" styleClass="ui-button-info" (onClick)="saveApplicants(true)"></p-splitButton>
    </div>
    <div class="ui-toolbar-group-right ui-fluid">
        <button pButton type="button" icon="ui-icon-cancel" label="Cancel" [routerLink]="['/search-applicant']" class="secondary-btn"></button>
    </div>
</p-toolbar>

<p-card>
<form #form="ngForm">
    <div class="ui-g form-group" style="margin-top: 10px;">
        <div class="ui-g-12 ui-md-2">
            <label>{{FIELDS.FIRST_NAME}}</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <input [(ngModel)]="applicant.User.FirstName" name="FirstName" [fieldLabel]="FIELDS.FIRST_NAME" type="text" pInputText class="ui-inputtext">
        </div>
        <div class="ui-g-12 ui-md-2">
            <label>{{FIELDS.LAST_NAME}}</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <input [(ngModel)]="applicant.User.LastName" name="LastName" [fieldLabel]="FIELDS.LAST_NAME" type="text" pInputText class="ui-inputtext">
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>{{FIELDS.EMAIL}}</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <input [(ngModel)]="applicant.User.Email" name="email" oneitemail [fieldLabel]="FIELDS.EMAIL" type="text" pInputText class="ui-inputtext" >
        </div>
        <div class="ui-g-12 ui-md-2">
            <label>{{FIELDS.PHONE}}</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <input [(ngModel)]="applicant.Phone" name="phone" [fieldLabel]="FIELDS.PHONE" type="text" pInputText class="ui-inputtext">
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2">
            <label>{{FIELDS.LOCATION}}</label>
        </div>
        <div class="ui-g-12 ui-md-4 ui-fluid">
            <input [(ngModel)]="applicant.GoogleAddressText" name="location" [fieldLabel]="FIELDS.LOCATION" type="text" pInputText class="ui-inputtext">
        </div>
    </div>

    <span *ngIf="applicant.JobApplications.length">
        <h4> <b>Job Applications</b></h4><br/>
        <p-table #table [columns]="cols" [value]="applicant.JobApplications" [paginator]="false" selectionMode="single" (onRowSelect)="onRowSelect($event.data)">
            <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>
                </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage" let-columns >
                <tr>
                    <td [attr.colspan]="columns.length">
                        No applicatans found - please try again.
                    </td>
                </tr>
            </ng-template>
        </p-table>
        </span>

    <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form>
</p-card>
