<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 no-padding cand-profile-block">
    <div class="basic-profile ">
        <div class="row pull-right">
            <div class="edit-cand" (click)="editCand(canDetail.infoMstr.userInfoMstrId, canDetail.infoMstr.status)">
                <mat-icon>edit</mat-icon>&nbsp; Edit</div>
        </div>
        <div class="row center-always">
            <app-avatar-pic [pic]="image" [initials]="getInitials(canDetail.infoMstr.fullName)"></app-avatar-pic>
        </div>
        <div class="row center-always">
            <span class="candName">{{canDetail.infoMstr.fullName}}</span>
        </div>
        <div class="row text-left">
            <mat-icon>mail_outline</mat-icon> <span class="cand-email">{{canDetail.infoMstr.emailId}}</span></div>
        <div class="row text-left">
            <mat-icon>smartphone</mat-icon> <span class="cand-email">{{canDetail.infoMstr.mobileNo}}</span></div>
    </div>
    <div class="prof-dets text-left">
        <h4>Professional Details</h4>
        <div class="prf-head">experience</div>
        <div class="prf-dets" *ngIf="canDetail.infoDetails.pgExperienceLevel">{{canDetail.infoDetails.pgExperienceLevel.experienceLevel}}</div>
        <div class="prf-head">skills</div>
        <div class="prf-dets"><span *ngFor="let skill of canDetail.infoMstr.pgUserSkillMapping;let i = index">{{skill.pgSkillTrackDtls.skillTrackDtlsName}}<span *ngIf="canDetail.infoMstr.pgUserSkillMapping.length - 1 !== i">,</span>&nbsp;</span>
        </div>
    </div>
    <div class="resume-block">
        <button class="btn btn-primary btn-outline btn-lg download-btn" (click)='downloadCandResume(canDetail.infoMstr.pgUserFileMapping[0].fileId)'><mat-icon>vertical_align_bottom</mat-icon><span class="btnTxt">Download Resume</span></button>
    </div>
</div>
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 no-padding cand-main-block">
    <div class="bg-white-block">
        <span class="pull-left conTitle">Applied Position: <span class="conAns" *ngIf="canDetail.infoDetails">{{canDetail.infoDetails.jobTitle}}</span></span>
        <span class="pull-right conTitle">Job Location: <span class="conAns">{{canDetail.infoMstr.pgLocation.city}}</span></span>
    </div>
    <div *ngIf="pgInitiate" class="step1Pg">
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
            <div class="row padding-top-n-btm-10">
                <img src="{{imgPath + 'invitation_icon.png'}}" alt="" />
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
            <div class="row padding-top-n-btm-50">
                <span class="p_title1">Playground</span>
                <span class="p_title2">Invitation</span>
            </div>
            <div class="row padding-top-n-btm-10">
                <span class="p_desc">Clicking the below button will send an email invitation to the candidate for accessing the primary assessment.</span>
            </div>
            <div class="row padding-top-n-btm-10 pull-left" *ngIf="loggedInUserRole == 'TA' || 'HEAD_COACH'">
                <button class="btn btn-lg btn-candidate-desc-primary" (click)="invitePl()">initiate playground</button>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
    </div>
    <div *ngIf="!pgInitiate" class="step2Pg">
        <ul>
            <li [class.active]="filterActive == 'S2'">
                <a (click)="stepC1()">PRIMARY CHALLENGE</a>
                <!-- <span class="" [ngStyle]="{'background-color':getcolor(getStatus())}">current stage</span> -->
                <span class="label xtra-lbl" [ngStyle]="{'background-color':getcolor(getStatus(canDetail.infoMstr.status))}" *ngIf="priExtraLbl">current stage</span>
            </li>

            <li [class.active]="filterActive == 'S3'" [class.disabled]='primaryCompleted'>
                <a (click)="stepC2()">CODING CHALLENGE</a>
                <span class="label xtra-lbl" [ngStyle]="{'background-color':getcolor(getStatus(canDetail.infoMstr.status))}" *ngIf="codExtraLbl">current stage</span>
            </li>

            <li [class.active]="filterActive == 'S4'">
                <a (click)="stepC3()">WHITEBOARD DISCUSSION</a>
                <span class="label xtra-lbl" [ngStyle]="{'background-color':getcolor(getStatus(canDetail.infoMstr.status))}" *ngIf="whitExtraLbl">current stage</span>
            </li>

            <li [class.active]="filterActive == 'S5'">
                <a (click)="stepC4()">LEADERSHIP DISCUSSION</a>
                <span class="label xtra-lbl" [ngStyle]="{'background-color':getcolor(getStatus(canDetail.infoMstr.status))}" *ngIf="leadExtraLbl">current stage</span>
            </li>
            <!-- <li  'S5'">
            </li> -->
        </ul>
        <div class="step1Pg" *ngIf="chalNotIntd">
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                <div class="row padding-top-n-btm-10 img">
                    <img src="{{imgPath + 'no_chalg.png'}}" alt="" class="height-152" />
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-8 col-xs-12">
                <div class="row padding-top-60 text-left">
                    <span class="candName just-captz">Challenge not yet initiated</span>
                </div>
                <div class="row padding-top-n-btm-10 text-left">
                    <span class="no-chal-txt">Candidate must complete the previous levels to view this tab contents.</span>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6"></div>
        </div>
        <div *ngIf="!chalNotIntd">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 no-padding outerBox">
                <div class="into-tb-colord" [ngStyle]="{'background-color':getcolor(getStatus(canDetail.infoMstr.status))}">
                    <div class="row ">
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'METTL_INITIATED'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">send</mat-icon>
                            <span class="chall_txt"> initiated primary challenge</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'METTL_IN_PROGRESS'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">access_time</mat-icon>
                            <span class="chall_txt"> test in progress</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'METTL_REVIEW'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">pause_circle_outline</mat-icon>
                            <span class="chall_txt"> kept on hold</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'METTL_CLEARED'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">check_circle_outline</mat-icon>
                            <span class="chall_txt"> completed primary challenge</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'CODING_CHALLENGE_READY'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">access_time</mat-icon>
                            <span class="chall_txt"> awaiting initiation</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'CODING_CHALLENGE_INITIATED'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">send</mat-icon>
                            <span class="chall_txt"> initiated coding challenge</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'CODING_CHALLENGE_STARTED'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">access_time</mat-icon>
                            <span class="chall_txt"> test in progress</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'CODING_CHALLENGE_COMPLETED'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">check_circle_outline</mat-icon>
                            <span class="chall_txt"> completed coding challenge</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'CODING_CHALLENGE_CLEARED'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">check_circle_outline</mat-icon>
                            <span class="chall_txt"> Cleared coding challenge</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'WHITEBOARD_READY'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">access_time</mat-icon>
                            <span class="chall_txt"> discussion in progress</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'WHITEBOARD_CLEARED'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">check_circle_outline</mat-icon>
                            <span class="chall_txt"> completed whiteboard discussion</span>
                        </div>
                        <!-- <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'LEADERSHIP_CONNECT_READY'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">access_time</mat-icon>
                            <span class="chall_txt"> in progress</span>
                        </div> -->
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'LEADERSHIP_CONNECT_CLEARED'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">check_circle_outline</mat-icon>
                            <span class="chall_txt"> completed leadership connect</span>
                        </div>
                        <div class="center-always pl-260" *ngIf="canDetail.infoMstr.status == 'METTL_FAILED' || canDetail.infoMstr.status == 'CODING_CHALLENGE_REJECTED' || canDetail.infoMstr.status == 'WHITEBOARD_REJECTED' || canDetail.infoMstr.status == 'LEADERSHIP_CONNECT_REJECTED'">
                            <mat-icon class="mat-icon material-icons pull-left" role="img" aria-hidden="true">cancel</mat-icon>
                            <span class="chall_txt"> rejected</span>
                        </div>
                    </div>
                </div>
                <div class="absolute-box">
                    <div class="row no-padding">
                        <div class="float-box" *ngIf="(candidateLevel == 'Candidate Mettl' || candidateLevel == 'PC') && (canDetail.eventDetails[0].eventScore)">
                            <div class="container">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                        <div class="prf-head">marks scored</div>
                                        <div class="progress" [attr.data-percentage]="canDetail.eventDetails[0].eventScore">
                                            <span class="progress-left">
                                                    <span class="progress-bar"></span>
                                            </span>
                                            <span class="progress-right">
                                                    <span class="progress-bar" [ngStyle]="{'border-color':getcolor(getStatus(canDetail.infoMstr.status))}"></span>
                                            </span>
                                            <div class="progress-value">
                                                <div class="marks-number">
                                                    {{canDetail.eventDetails[0].eventScore}}<br>
                                                    <!-- <span>completed</span> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                        <div class="prf-head2">test completed on <span class="prf-dets">{{canDetail.eventDetails[0].updatedDt | date}}</span>
                                        </div>
                                        <div class="padding-top-n-btm-50">
                                            <a class="btn btn-primary btn-outline btn-lg download-btn" [attr.href]="canDetail.candidateTestReport">
                                                <mat-icon>vertical_align_bottom</mat-icon><span class="btnTxt">Download Report</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="float-box" *ngIf="candidateLevel == 'Candidate Mettl' || candidateLevel == 'PC' || candidateLevel == 'Candidate Coding Challenge' || candidateLevel == 'CC'">
                            <div class="container">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <div class="prf-head">assessment id</div>
                                    <div *ngIf="canDetail.scheduleCandidateDetails" class="prf-dets">{{canDetail.scheduleCandidateDetails.scheduleDetails.pgAssessmentDtls.assessmentId}} </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <div class="prf-head2" *ngIf="canDetail.scheduleCandidateDetails">invitation sent on <span class="prf-dets">{{canDetail.scheduleCandidateDetails.createdDt | date:'medium'}}</span></div>
                                    <div *ngIf="canDetail.eventDetails.length > 0">
                                        <div class="prf-head2" *ngIf="canDetail.eventDetails[0].pgEventRule.eventRuleName == 'Candidate Coding Challenge'">created on <span class="prf-dets">{{canDetail.eventDetails[0].createdDt | date:'medium'}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="float-box" *ngIf="candidateLevel == 'Candidate Coding Challenge' || candidateLevel == 'CC'">
                            <div class="container">
                                <div class="row no-padding">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-left">
                                        <button class="btn btn-candidate-desc-primary1" (click)="addEditCoachRUc('assessment')"><mat-icon>autorenew</mat-icon> <span class="btnTxt fDbtn1"> Change Usecase</span></button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                        <button class="btn btn-primary btn-outline download-btn feedBtn pull-right" (click)="getAwsCreds(canDetail.infoDetails.adId)"><span class="btnTxt fDbtn"> AWS Credentials</span></button>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hor-line"></div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngIf="workSpaceSuccess">
                                    <div class="usecase-title">AWS Credentials</div>
                                    <div class="prf-head3"> Username:&nbsp; {{canDetail.infoDetails.adId}} </div>
                                    <div class="prf-head3"> Password:&nbsp; P@ssw0rd </div>
                                    <div class="prf-head3"> Registration Code:&nbsp; {{registrationCode}} </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hor-line" *ngIf="workSpaceSuccess"></div>
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" *ngIf=" canDetail.businessUsecase?.length> 0; else noUsecase">
                                    <div class="usecase-title">
                                        {{canDetail.businessUsecase[0].usecaseTitle}}
                                    </div>
                                    <div class="usecase-desc">
                                        <span [innerHtml]='canDetail.businessUsecase[0].usecaseDescription'></span>
                                    </div>
                                </div>
                                <ng-template #noUsecase>
                                    No Usecase details available.
                                </ng-template>
                            </div>
                        </div>
                        <div *ngIf="candidateLevel == 'Candidate Whiteboard' || candidateLevel == 'Candidate Leadership Connect' || candidateLevel == 'WC' || candidateLevel == 'LC'">
                            <div *ngIf="canDetail.infoMstr.status == 'LEADERSHIP_CONNECT_CLEARED' && (candidateLevel == 'Candidate Leadership Connect' || candidateLevel == 'LC')">
                                <div class="black-float-box">
                                    <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                                        <img src="{{imgPath + 'cleared_all.png'}}" alt="" class="img-responsive" /></div>
                                    <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                                        <div class="last-level-head"><span class="just-captz">{{canDetail.infoMstr.fullName}}</span>&nbsp;has cleared all the challenges</div>
                                        <div class="last-level-txt">HR has been initiated for proceeding with the further process</div>
                                    </div>
                                </div>
                            </div>
                            <div class="float-box">
                                <div class="row no-padding">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-right">
                                        <div class="prf-head2" *ngIf="candidateLevel == 'Candidate Whiteboard' || candidateLevel == 'WC'">initiated on <span class="prf-dets">{{candWhiteCrDt | date:'medium'}}</span></div>
                                        <div class="prf-head2" *ngIf="candidateLevel == 'Candidate Leadership Connect' || candidateLevel == 'LC'">initiated on <span class="prf-dets">{{candLeaderCrDt | date:'medium'}}</span></div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="row info-static">
                                <div class="info-title">Info</div>
                                <ul class="static-points">
                                    <li>&#9679; &nbsp; Candidates who scored between Organisation Pass Mark and Individual Assessment Pass Mark will be kept on hold. PGM can Approve/Reject these candidates to next stage.</li>
                                    <li>&#9679; &nbsp; This challenge will expire automatically if the candidate miss to take this within 10 days from the date of invite.</li>
                                    <li>&#9679; &nbsp; All the feedback given through the mobile app will appear in the right column</li>
                                </ul>
                            </div> -->
                        </div>
                    </div>

                    <div class="info-static" *ngIf="candidateLevel == 'Candidate Mettl' || candidateLevel == 'PC'">
                        <!-- [style.margin-top]=[class.absolute-box.style.height] -->
                        <div class="info-title">Info</div>
                        <ul class="static-points">
                            <li>&#9679; &nbsp; Candidates who scored between Organisation Pass Mark and Individual Assessment Pass Mark will be kept on hold. PGM can Approve/Reject these candidates to next stage.</li>
                            <li>&#9679; &nbsp; This challenge will expire automatically if the candidate miss to take this within 10 days from the date of invite.</li>
                            <li>&#9679; &nbsp; All the feedback given through the mobile app will appear in the right column</li>
                        </ul>
                    </div>
                    <div *ngIf="(canDetail.infoMstr.status == 'METTL_REVIEW' || canDetail.infoMstr.status == 'CODING_CHALLENGE_COMPLETED' || canDetail.infoMstr.status == 'WHITEBOARD_READY' || canDetail.infoMstr.status == 'LEADERSHIP_CONNECT_READY') && loggedInUserRole !== 'TA'">
                        <div class="approve_block">
                            <button class="btn btn-red btn-lg" (click)="candConfirm(canDetail.infoMstr.userInfoMstrId,canDetail.infoMstr.status,true,'reject')">reject</button>
                            <button class="btn btn-green btn-lg" (click)="candConfirm(canDetail.infoMstr.userInfoMstrId,canDetail.infoMstr.status,true,'approve')">approve</button>
                        </div>
                    </div>
                    <div *ngIf="(canDetail.infoMstr.status == 'METTL_CLEARED' || canDetail.infoMstr.status == 'CODING_CHALLENGE_READY') && loggedInUserRole !== 'TA'">
                        <div class="approve_block">
                            <button class="btn btn-lg btn-candidate-desc-primary" [disabled]="isBtnNotActive" (click)="initiateCodFn('CODING_CHALLENGE_INITIATED')">
                                initiate coding challenge
                            </button>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 no-padding outerBox feedbakncoach">
                <div class="row no-margin" *ngIf="candidateLevel == 'Candidate Coding Challenge' || candidateLevel == 'CC'">
                    <div class="col-lg-11 col-md-11 col-sm-12 col-xs-12 center-always">
                        <div class="coach-card">
                            <div class="coach-card-title"> assigned coach</div>
                            <div class="row">
                                <!-- *ngIf="canDetail.coachDetails?.length > 0" -->
                                <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
                                    <div *ngIf="canDetail.coachDetails?.length > 0; else noCaoch">
                                        <app-avatar-pic [initials]="getInitials(canDetail.coachDetails[0].fullName)"></app-avatar-pic>
                                        <div class="coach-name">{{canDetail.coachDetails[0].fullName}}</div>
                                    </div>
                                    <ng-template #noCaoch>
                                        <span class="coach-name">No Coach Assigned</span>
                                    </ng-template>
                                    <!-- {{canDetail.coachDetails.fullName}} -->
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                                    <mat-icon (click)="addEditCoachRUc('coach')" class="edit-btn">edit</mat-icon>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row padding-top-n-btm-10">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 candName">
                        feedback
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                        <button class="btn btn-primary btn-outline download-btn feedBtn" data-toggle="modal" data-target="#feedBackModal"><mat-icon>add</mat-icon><span class="btnTxt fDbtn"> Add New</span></button>
                    </div>
                </div>
                <div class="col-lg-11 col-md-11 col-sm-12 col-xs-12 center-always feedback-block" *ngIf="feedbackDets?.length>0; else noFeedB">
                    <div class="feedback-card" *ngFor="let fdb of feedbackDets">
                        <div class="feedback-desc">
                            {{fdb.feedbackComments}}
                        </div>
                        <div class="feedback-cardFooter">
                            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
                                <app-avatar-pic [pic]="image" [initials]="getInitials(fdb.reviewerName)"></app-avatar-pic>
                            </div>
                            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-6">
                                <div class="fdReviewer">{{fdb.reviewerName}}</div>
                            </div>
                            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
                                <div class="fdDate">
                                    {{fdb.reviewDate | date}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <ng-template #noFeedB>
                    <div class="noFeeB">no feedback yet</div>
                </ng-template>
            </div>
        </div>
    </div>
    <!-- </div> -->
    <!-- modal -->

    <div id="feedBackModal" class="modal fade aws-modal" role="dialog">
        <div class="modal-dialog admin-modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <img src="{{imageUrl}}/assets/img/pgflow/exit_icon.png" class="close" data-dismiss="modal" />
                    <h4 class="modal-title">Feedback on
                        <span *ngIf="priExtraLbl"> Primary Challenge</span>
                        <span *ngIf="codExtraLbl"> Coding Challenge</span>
                        <span *ngIf="whitExtraLbl"> whiteboard Discussion</span>
                        <span *ngIf="leadExtraLbl"> Leadershio Connect</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <textarea rows="4" class="form-control" style="min-width: 100%" [(ngModel)]='fedBck.reviewFeedback' placeholder="Comments"></textarea>
                    <div class="modalbuttons">
                        <a id="closeModal" class="modalCanbutton" data-dismiss="modal">
                   cancel
                    </a>
                        <button class="btn modalSubbutton" data-dismiss="modal" (click)="submitFeedback()">
                  submit 
                </button>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <button id="coachUseCseModalButton" [hidden]="true" data-toggle="modal" data-target="#assignModal"></button>

    <div id="assignModal" class="ta-modal modal fade skill-modal" role="dialog">
        <div class="modal-dialog admin-modal-dialog">
            <div class="ta-modal-content">
                <div *ngIf="!FBmodal" class="row">
                    <div class="col-lg-6 left-side">
                        <div class="row text1">
                            <h2>
                                SELECTED CANDIDATE(S)
                            </h2>
                        </div>
                        <div class="">
                            <div class="searchEmp">
                                <div class="row empContainerDiv">
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-2">
                                                <a class="IMG">
                                                    {{ getInitials(canDetail.infoMstr.fullName) }}
                                                </a>
                                            </div>
                                            <div class="col-lg-10">
                                                <div class="employeeDtls">
                                                    <h4 class="candName">
                                                        {{canDetail.infoMstr.fullName}}
                                                    </h4>
                                                    <h5 class="empAdId" *ngIf="canDetail.coachDetails?.length > 0">
                                                        Coach : {{canDetail.coachDetails[0].fullName}}
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 right-side">
                        <div class="row">
                            <i class="material-icons icon-close" (click)="closeModal()" id="closeAssignCoachModal" data-dismiss="modal">highlight_off</i>
                        </div>
                        <div *ngIf="selectModalValue === 'coach'">
                            <div class="text1">
                                <h2>Would you like to change the coach?</h2>
                            </div>
                            <div class="text2">
                                <h2>Select from the below list of coaches to change</h2>
                            </div>
                            <div class="row">
                                <mat-select class="ta-select-box" placeholder="Select coach" #coach (change)="selectedCoach(coach.value)">
                                    <mat-option *ngFor="let coach of coaches" [value]="coach.userInfoMstrId">
                                        {{coach.fullName}}
                                    </mat-option>
                                </mat-select>
                            </div>
                            <div class="row btnDiv">
                                <div class="col-lg-2"></div>
                                <div class="col-lg-2">
                                    <span class="cancelBtn" (click)="closeModal()">CANCEL</span>

                                </div>
                                <div class="col-lg-4">
                                    <span class=""><button class="btn btn-lg changeBtn" (click)="submitCoachUpdate()">CHANGE</button></span>
                                </div>
                                <div class="col-lg-2"></div>

                            </div>

                        </div>
                        <div *ngIf="selectModalValue === 'assessment'">
                            <div class="text1">
                                <h2>Would you like to change the Assessment?</h2>
                            </div>
                            <div class="text2">
                                <h2>Select from the below list of assessments to change</h2>
                            </div>
                            <div class="row">
                                <mat-select class="ta-select-box" placeholder="Select assessment" #assessment (change)="selectedAssess(assessment.value)">
                                    <mat-option *ngFor="let assess of assessments" [value]="assess.id">
                                        {{assess.usecaseTitle}}
                                    </mat-option>
                                </mat-select>
                            </div>
                            <div class="row btnDiv">
                                <div class="col-lg-2"></div>
                                <div class="col-lg-2">
                                    <span class="cancelBtn" (click)="closeModal()">CANCEL</span>

                                </div>
                                <div class="col-lg-4">
                                    <span class=""><button class="btn btn-lg changeBtn" (click)="submitAssessmentUpdate()">CHANGE</button></span>
                                </div>
                                <div class="col-lg-2"></div>

                            </div>
                        </div>
                    </div>
                </div>
                <div *ngIf="FBmodal" class="row feeback-container">
                    <div class="">
                        <i class="material-icons icon-close" (click)="closeModal()" id="closeAssignCoachModal" data-dismiss="modal">highlight_off</i>
                    </div>
                    <h2 class="feedback-heading" *ngIf="modalData == 'approve'">
                        Would you like to approve <span class="just-captz">{{canDetail.infoMstr.fullName}}</span> to next stage?
                    </h2>
                    <h2 class="feedback-heading" *ngIf="modalData == 'reject'">
                        Would you like to reject <span class="just-captz">{{canDetail.infoMstr.fullName}}</span> ?
                    </h2>
                    <div>
                        <!-- <input type="text" class="feedback-text" #feedbacktext> -->
                        <textarea rows="4" class="form-control" style="width: 80%; margin-left: 10%" placeholder="Comments" #feedbacktext></textarea>
                    </div>
                    <div class="row btnDiv">
                        <div class="col-lg-2"></div>
                        <div class="col-lg-2">
                            <span class="cancelBtn" (click)="closeModal()">CANCEL</span>

                        </div>
                        <div class="col-lg-4" *ngIf="modalData === 'approve'">
                            <span class=""><button class="btn btn-lg btn-green" (click)="feedbackSubmit(feedbacktext.value)">APPROVE</button></span>
                        </div>
                        <div class="col-lg-4" *ngIf="modalData === 'reject'">
                            <span class=""><button class="btn btn-lg btn-red" (click)="feedbackSubmit(feedbacktext.value)">REJECT</button></span>
                        </div>
                        <div class="col-lg-2"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <button id="canEditBtn" [hidden]="true" data-toggle="modal" data-target="#canEditModal"></button>
    <div id="canEditModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="">
                <i class="material-icons icon-close" (click)="closeEditModal()" id="closeEditCandModal" data-dismiss="modal">highlight_off</i>
            </div>
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <img src="{{imageUrl}}/assets/img/pgflow/exit_icon.png" class="close" data-dismiss="modal" />
                    <h4 class="modal-title">Edit Candidate </h4>
                </div>
                <div class="modal-body" *ngIf="editCanCopy">
                    <app-ta-add-candidate [editCandInfo]="editCandInfo" (editCandSucc)="refreshCandDets($event)"></app-ta-add-candidate>
                    <!-- <div class="row btnDiv">
                        <div class="col-lg-2">
                            <span class="cancelBtn" (click)="closeEditModal()">CANCEL</span>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 no-padding loading-blockimg" *ngIf="loaderImg">
    <img src="{{imgLd + 'loader.gif'}}" alt="loading" class="center-always" />
</div>