<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(true)"></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" style="word-wrap: break-word;"> {{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" style="word-wrap: break-word;"> {{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 show active" id="v-pills-details" role="tabpanel" aria-labelledby="v-pills-details-tab">
                            <h3 class="tab-header">Invitations</h3>
                            <h4>Successful Invites</h4><br/>
	                        <button pButton type="button" label="Add" (click)="addSuccessfulInvites()" style="text-align: center; "></button>
                            <p-table #successfulInvitesTable [columns]="successfulInvitesCols" [value]="invitees" [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>
                                            <input pInputText *ngIf="rowData.IsNew" type="text" class="form-control" [(ngModel)]="rowData.Email" name="Email{{rowIndex}}" style="height: 30px;">
                                            {{rowData.IsNew ? "" : rowData?.Email}}
                                        </td>
                                        <td>
                                            {{rowData?.Name}}
                                        </td>
                                        <td>
                                            {{rowData?.JoinedDate | date : 'dd-MMM-yyyy'}}
                                        </td>
                                        <td style="text-align: center;">
                                            <button *ngIf="rowData.IsNew" pButton type="button" icon="ui-icon-delete" title="Remove" (click)="deleteRow(rowData)"></button>
                                        </td>
                                    </tr>
                                </ng-template>
                            </p-table>
                        </div>
                    </div>
                </div>
            </p-tabPanel>
            <p-tabPanel header="Audit Trail" headerStyleClass="contactdetails">
                <app-audit-tab [BO]="careerUser.Candidate.User"></app-audit-tab>
            </p-tabPanel>
        </p-tabView>
    </div>
    <p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle" appendTo="body"></p-confirmDialog>
    <p-progressSpinner *ngIf="showLoader"></p-progressSpinner>
</form>