<section class="Section col-sm-12 col-md-12 col-lg-12" *ngIf="PGMCandidateDtls; else loader">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2">
                <img (click)="goto()" class="homeIcon" src="{{imageUrl}}/assets/img/pgflow/bnym/home%20-%20anticon.png">
                <p class="empDtls-arrow"> > </p>
                <p [class]="empDtlsArrow" (click)="goto('empDtls')"> Employee Details </p>
                <p class="empDtls-arrow"> > </p>
            </div>
            <div class="col-lg-4">
                <p class="selected-assessment-name">{{selectedAssessmentName}}</p>
            </div>
            <div class="col-lg-3"></div>
            <div class="col-lg-3"></div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="col-sm-12 col-md-12 col-lg-12 left_block">
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-12 candidate_info">
                            <div class="cdt_top_card">

                                <a class="IMG">

              {{Initials(candt.pgUserInfoMstr.fullName)}}

            </a>
                                <div class="col-sm-12 col-md-12 col-lg-12 candidate">

                                    <h4>
                                        {{candt.pgUserInfoMstr.fullName}}
                                    </h4>

                                    <h5>
                                        <span>{{candt.jobId}}</span> &nbsp; <span class="exp_level">{{getSubstring(candt.pgExperienceLevel.experienceLevel)}}</span>
                                    </h5>



                                    <div class="badges">
                                        <app-ta-skill-badges *ngFor="let _skill of candt.pgUserInfoMstr.pgUserSkillMapping;let i = index;" [skill]="_skill.pgSkillTrackDtls.skillTrackDtlsName" [class.active]="i === 0"></app-ta-skill-badges>
                                    </div>

                                </div>

                                <div class="col-sm-12 col-md-12 col-lg-12 location"><i class="fa fa-map-marker" aria-hidden="true"></i>
                                    <h5>{{candt.pgUserInfoMstr.pgLocation.city}}</h5>
                                </div>

                                <div class="col-sm-12 col-md-12 col-lg-12 location"><i class="fa fa-clock-o" aria-hidden="true"></i>
                                    <h5 style="margin-bottom: 0px;">{{candt.pgUserInfoMstr.createdDt | date:'EEEE, MMMM d, y, h:mm:ss a' }}</h5>
                                </div>

                                <span class="col-sm-12 col-md-12 col-lg-12 time-zone"><h6>Eastern Standard Time(UTC/GMT-5 hours)</h6></span>

                            </div>



                        </div>
                    </div>
                    <div class="row">
                        <app-ta-candidate-details-card [userData]="userData" showCandidateDetails="false"></app-ta-candidate-details-card>
                    </div>
                </div>

            </div>

            <div class="col-md-8 alignTop">

                <div class="" *ngIf="AllEvents">

                    <app-employee-assessment-card *ngIf="allStatusLearningPathRecords.length > 0" [title]="'Learning Path'" [primaryrecord]="allStatusLearningPathRecords" [allskills]="skills" [role]="'PGM'" (gotoLPEvents)="gotoLP($event)" (hideSlidingBtn)="hideSlidingBtn()"
                        (cardId)="learningPathCardDetails($event)"></app-employee-assessment-card>
                    <app-employee-assessment-course [Allcourserecords]="allstatuscourserecords" *ngIf="AllcourserecordsCount >= 0">
                    </app-employee-assessment-course>
                    <app-employee-assessment-card *ngIf="primaryusecase.length > 0" [title]="'Primary Assessment'" [role]="'PGM'" [primaryrecord]="primaryusecase" [allskills]="skills" (gotoEvents)="goToEventDetails($event)">
                    </app-employee-assessment-card>
                    <app-employee-assessment-card *ngIf="technicalusecase.length > 0" [title]="'Technical Usecase Assessment'" [role]="'PGM'" [technicalrecord]="technicalusecase" [allskills]="skills" (gotoEvents)="goToEventDetails($event)">
                    </app-employee-assessment-card>
                    <app-employee-assessment-card *ngIf="businessusecase.length > 0" [title]="'Business Usecase Assessment'" [role]="'PGM'" [businessrecord]="businessusecase" [allskills]="skills" (gotoEvents)="goToEventDetails($event)">
                    </app-employee-assessment-card>
                </div>
                <div *ngIf="!AllEvents">
                    <div class="row statusTop">
                        <div class="col-lg-3"></div>
                        <div class="col-lg-4"></div>
                        <div class="col-lg-3">
                            <div class="status-container" id="todo" *ngIf="selectedAssessmentStatus == 'ASSIGNED'">
                                <div class="todo">
                                    <img src="{{imageLink}}todo.png">
                                    <h2>To Do</h2>
                                </div>
                            </div>
                            <div class="status-container" id="inprogress" *ngIf="selectedAssessmentStatus == 'INPROGRESS'">
                                <div class="inprogress">
                                    <img src="{{imageLink}}inprogress_icon.png">
                                    <h2>In Progress</h2>
                                </div>
                            </div>
                            <div class="status-container" id="underReview" *ngIf="selectedAssessmentStatus == 'UNDER_REVIEW'">
                                <div class="underReview">
                                    <img src="{{imageLink}}UR.png">
                                    <h2>Under Review</h2>
                                </div>
                            </div>
                            <div class="status-container" id="reviewComplete" *ngIf="selectedAssessmentStatus == ''">
                                <div class="reviewComplete">
                                    <img src="{{imageLink}}completed.png">
                                    <h2>Review Complete</h2>
                                </div>
                            </div>
                            <div class="status-container" id="done" *ngIf="selectedAssessmentStatus == 'DONE'">
                                <div class="done">
                                    <img src="{{imageLink}}done_icon.png">
                                    <h2>Done</h2>
                                </div>
                            </div>
                            <div>
                                <h2 class="reviewDiv" *ngIf=" reviewerFeedbacks.length > 0">{{getCountReviewer(reviewerFeedbacks)}} out of {{reviewerFeedbacks.length}} reviews completed</h2>
                            </div>
                        </div>
                        <div class="col-lg-2">
                            <div class="closeX" (click)="closeLP()">
                                <h2>X</h2>
                            </div>
                        </div>

                    </div>
                    <div *ngIf="selectedAssessmentName == 'Business Usecase Assessment' || selectedAssessmentName == 'Technical Usecase Assessment'">
                        <div class="row">
                            <div class="useCase-details" *ngIf="useCaseData">
                                <app-bny-usecase *ngIf="useCaseData.usecaseTitle" [useCase]="useCaseData" [bgColor]="'#FFFFFF'"></app-bny-usecase>
                            </div>
                        </div>
                        <div class="row">
                            <app-pgm-bny-reviewer *ngIf=" reviewerFeedbacks.length > 0" [reviewerList]="reviewerFeedbacks"></app-pgm-bny-reviewer>
                        </div>
                    </div>
                    <div *ngIf="selectedAssessmentName == 'Primary Assessment'">

                        <div class="row">
                            <div class="primary-dtls">
                                <div class="rectangle-2"></div>
                                <div>
                                    <h2 class="primary-assessment-name">{{useCaseData.assessmentDesc}}</h2>
                                </div>
                                <div>
                                    <h2 class="primary-skill">{{useCaseData.pgSkillTrackMstr.skillTrackName}}</h2>
                                </div>
                                <div>
                                    <h2 class="primary-level">Beginer Level</h2>
                                </div>
                                <div>
                                    <h2 class="primary-desc">To enhance and validate the front end technology skills</h2>
                                </div>
                            </div>
                        </div>
                        <div class="row" *ngIf="selectedAssessmentStatus == 'DONE'">
                            <div class="complete-container">
                                <div>
                                    <img class="img-score" src="{{imageLink}}success_icon.png">
                                    <app-scorering [score]="score(useCaseData.eventScore)"></app-scorering>
                                    <div>
                                        <h2 class="success-text hide">Successfully completed the Primary Assessment.</h2>

                                        <div class="viewReport-container hide" (click)="report(useCaseData)">
                                            <h2 class="viewReort">View Report</h2>
                                        </div>
                                    </div>

                                    <h3 class="improveScore hide">Improve my score!</h3>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div *ngIf="selectedAssessmentName == 'Learning Path'">
                        <div class="row">
                            <div class="LP-dtls-container">
                                <div class="LP-dtls">
                                    <h3 class="LP-name">{{learningPathCardDetails.name}}</h3>
                                    <p class="LP-skill" *ngFor="let skill of learningPathCardDetails.skillNames">{{skill}}</p>
                                    <p class="LP-level">{{learningPathCardDetails.pgExperienceLevelName}}</p>
                                    <p class="LP-desc">{{learningPathCardDetails.description}}</p>
                                </div>
                                <div class="LP-list">
                                    <div class="col-lg-3">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <img src="{{imageUrl}}/assets/img/employee/profile/courses.png">
                                            </div>
                                            <div class="col-lg-6 LP-count-Dtls">
                                                <p class="LP-count">{{learningPathCardDetails.courseCount}}</p>
                                                <p class="LP-ass-name">Courses</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <img src="{{imageUrl}}/assets/img/employee/profile/PA.png">
                                            </div>
                                            <div class="col-lg-6 LP-count-Dtls">
                                                <p class="LP-count">{{learningPathCardDetails.primaryAssessCount}}</p>
                                                <p class="LP-ass-name">Primary Assessment</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <img src="{{imageUrl}}/assets/img/employee/profile/TA.png">
                                            </div>
                                            <div class="col-lg-6 LP-count-Dtls">
                                                <p class="LP-count">{{learningPathCardDetails.technicalAssessCount}}</p>
                                                <p class="LP-ass-name">Technical Assessment</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <img src="{{imageUrl}}/assets/img/employee/profile/BA.png">
                                            </div>
                                            <div class="col-lg-6 LP-count-Dtls">
                                                <p class="LP-count">{{learningPathCardDetails.businessAssessCount}}</p>
                                                <p class="LP-ass-name">Business Assessment</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div *ngIf="learningPathCardDetails">

                            <app-learnig-path-details [learningPathDetails]="learningPathCardDetails" [role]="'PGM'" [detailsType]="'courseSelection'"></app-learnig-path-details>

                            <!--  <app-employee-assessment-card *ngIf="primaryAssList.length > 0" [title]="'Primary Assessment'" [allskills]="allSkill" [primaryrecord]="primaryAssList"
            ></app-employee-assessment-card>-->

                            <!--<app-pgm-learning-path-details  [role]="'PGM'" [allSkill]="skills" [assessmentCollections]="assessmentCollection" [courseCollections]="courseCollection"></app-pgm-learning-path-details>-->
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
<ng-template #loader>

    <img class="loaderComp" src="{{imageUrl}}/assets/img/Blocks.gif">

</ng-template>