<form #form="ngForm" *ngIf="careerUser">
    <div class="ui-g ui-fluid">
        <div class="ui-g-12 nopad">
            <p-toolbar>
                <div class="ui-toolbar-group-left">
                    View User
                </div>
                <div class="ui-toolbar-group-right">
                    <button pButton type="button" label="Save" icon="ui-icon-save" (click)="saveUser(false)"></button>
                </div>
                <div class="ui-toolbar-group-right">
                    <button pButton type="button" icon="ui-icon-cancel" label="Cancel" [routerLink]="['/my-career/my-career-users']" 
                            class="secondary-btn"></button>
                </div>
            </p-toolbar>
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-1">
            <label>First Name</label>
        </div>
        <div class="ui-g-12 ui-md-3 ui-fluid"> {{careerUser.FirstName}}
        </div>
        <div class="ui-g-12 ui-md-1">
            <label>Last Name</label>
        </div>
        <div class="ui-g-12 ui-md-3 ui-fluid"> {{careerUser.LastName}}
        </div>
        <div class="ui-g-12 ui-md-1">
            <label>Email</label>
        </div>
        <div class="ui-g-12 ui-md-3 ui-fluid"> {{careerUser.Email}}
        </div>
    </div>
    <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-1">
            <label>Mobile</label>
        </div>
        <div class="ui-g-12 ui-md-3 ui-fluid"> {{careerUser.Mobile}}
        </div>
        <div class="ui-g-12 ui-md-1">
            <label>Active</label>
        </div>
        <div class="ui-g-12 ui-md-3 ui-fluid">
            <p-checkbox [(ngModel)]="careerUser.Candidate.User.Enabled" name="Active{{careerUser.ObjectID}}" fieldLabel="Active" binary="true"></p-checkbox>
        </div>
        <div class="ui-g-12 ui-md-1" *ngIf="careerUser.Candidate.ReferredBy">
            <label> Refereed By </label>
        </div>
        <div class="ui-g-12 ui-md-3" *ngIf="careerUser.Candidate.ReferredBy">
            <p-button label="Remove Referred By" (onClick)="removeReferredBy()" icon="ui-icon-delete"></p-button>
            <a [routerLink]="['/my-career/view-career-user', careerUser.Candidate.ReferredBy.ObjectID]" class="data-link" style="">
                {{user?.Candidate?.ReferredBy?.Name}}</a>
        </div>
    </div>
    <div class="ui-g">
        <p-tabView orientation="left" hr>
            <p-tabPanel header="Invitations" [selected]="true">
                <div class="ui-g-12 ui-md-12">
                    <div class="tab-content" id="v-pills-tabContent">
                        <div class="tab-pane fade show active" id="v-pills-details" role="tabpanel" aria-labelledby="v-pills-details-tab">
                            <h2 class="tab-header">Invitations</h2>
                            <h4>Successful Invites</h4><br/>
	                            <button pButton type="button" label="Add" (click)="addSuccessfulInvites()" style="text-align: center; "></button>
                            <p-table #successfulInvitesTable [columns]="successfulInvitesCols" [value]="successfulInvites" [paginator]="false" >
                                <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>
                                </ng-template>
                                <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
                                    <tr>
                                        <td>
                                            {{rowData.Email}}
                                        </td>
                                        <td>
                                            {{rowData.Name}}
                                        </td>
                                        <td>
                                            {{rowData.JoinedDate}}
                                        </td>
                                        <td>
                                            <button pButton type="button" icon="ui-icon-edit" title="Edit" (click)="onRowSelect(rowData)"></button>
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                        </div>
                    </div>
                </div>
            </p-tabPanel>
            <p-tabPanel header="Audit Trail" >
                <div class="ui-g-12 ui-md-12">
                    <div class="tab-content" id="v-pills-tabContent">
                        <div class="tab-pane fade show active" id="v-pills-details" role="tabpanel" aria-labelledby="v-pills-details-tab">
                            <h2 class="tab-header">Audit Trail</h2>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-5">
                                    <label> Audit Event: by Peter Smith (25585) </label>
                                </div>
                            </div>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-5">
                                    <label> 10 Feb 2020 15:45 </label>
                                </div>
                            </div>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-5">
                                    <label> Changeset: Update Profile: 2568554 (Edit) </label>
                                </div>
                            </div>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-12">
                                    <p-table #bosTable [columns]="bosCols" [value]="bos" [paginator]="false" >
                                        <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>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
                                            <tr>
                                                <td>
                                                    {{rowData.Field}}
                                                </td>
                                                <td>
                                                    {{rowData.ChangeType}}
                                                </td>
                                                <td>
                                                    {{rowData.Old}}
                                                </td>
                                                <td>
                                                    {{rowData.New}}
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                </div>
                            </div>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-12">
                                </div>
                            </div>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-5">
                                    <label> Audit Event: by Peter Smith (25585) </label>
                                </div>
                            </div>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-5">
                                    <label> 02 Feb 2020 15:45 </label>
                                </div>
                            </div>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-5">
                                    <label> Changeset: Workplace Preference (Culture) : 2568554 (NEW) </label>
                                </div>
                            </div>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-12">
                                    <p-table #bosTable [columns]="bosCols" [value]="bos" [paginator]="false" >
                                        <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>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
                                            <tr>
                                                <td>
                                                    {{rowData.Field}}
                                                </td>
                                                <td>
                                                    {{rowData.ChangeType}}
                                                </td>
                                                <td>
                                                    {{rowData.Old}}
                                                </td>
                                                <td>
                                                    {{rowData.New}}
                                                </td>
                                            </tr>
                                        </ng-template>
                                    </p-table>
                                </div>
                            </div>
                            <div class="ui-g form-group">
                                <div class="ui-g-12 ui-md-12">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </p-tabPanel>
        </p-tabView>
    </div>
    <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form>