<form #form="ngForm">
    <div class="ui-g ui-fluid">
        <div class="ui-g-12 nopad">
            <p-toolbar>
                <div class="ui-toolbar-group-left">
                    My Career Users
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="ui-g form-group" style="margin-bottom: 0px;">
        <div class="ui-g-12 ui-md-2">
            <label> Search </label>
        </div>
        <div class="ui-g-12 ui-md-8">
            <input [(ngModel)]="myCareerUser.Details" name="Search" fieldLabel="Search" type="text" pInputText class="ui-inputtext" style="width: 90%;"
                        placeholder="Search for First Name, Last Name, Email and Mobile of the User">
        </div>
    </div>
    <div class="ui-g form-group" style="margin-bottom: 0px;">
        <div class="ui-g-12 ui-md-2">
            <label>Include Inactive</label>
        </div>
        <div class="ui-g-12 ui-md-3 ui-fluid">
            <p-checkbox [(ngModel)]="myCareerUser.IncludeDisabled" name="IncludeInactive" fieldLabel="Include Inactive" binary="true"></p-checkbox>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-2 ui-fluid">
            <p-button label="Clear" (onClick)="onClear()" icon="ui-icon-clear"></p-button>
        </div>
        <div class="ui-g-12 ui-md-2 ui-fluid">
            <p-button label="Search" (onClick)="getCareerUsers(true)" icon="ui-icon-search"></p-button>
        </div>
    </div>
    <span *ngIf="showResults">
        <p-table #careerUsersTable [columns]="careerUsersCols" [value]="careerUsers" [paginator]="true" [rows]="50" 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)="careerUsersTable.filter($event.target.value, col.field, 'contains')">
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData>
                <tr [pSelectableRow]="rowData">
                    <td>
                        {{rowData.FirstName}}
                    </td>
                    <td>
                        {{rowData.LastName}}
                    </td>
                    <td>
                        {{rowData.Email}}
                    </td>
                    <td>
                        {{rowData.Mobile}}
                    </td>
                    <td>
                        {{rowData.Active}}
                    </td>
                    <td>
                        <p-button label="Login as User" (onClick)="loginAsUser(rowData.Candidate.User)" icon="ui-icon-input"></p-button>
                    </td>
                    <td>
                        <button pButton type="button" icon="ui-icon-edit" title="Edit" (click)="onRowSelect(rowData)"></button>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage" let-columns >
                <tr>
                    <td [attr.colspan]="columns.length">
                        No CareerUsers found - please try again.
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </span>
    <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form>