
<div class="container-fluid" *ngIf="CandidateData">

  <div class="row">

    <div class="col-md-3">
      <app-ta-candidate-profile-card [userData]="userData" ></app-ta-candidate-profile-card>

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

    <div class="col-md-9">




      <!--<app-scorecards [evaluation]="evaluationCriteria" (selectedCriteria)="editEvaluation($event)"></app-scorecards>

      <app-scorering score="78"></app-scorering>
      <app-viewusecase title="User Authentication System" [content]="techusecaseINFO.usecaseDescription"></app-viewusecase>
-->

       <app-candidate-details-container [candidate]="candidateDashboard" [assessment]="assessment" [role]="role"  ></app-candidate-details-container>

    </div>
  </div>

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

      <!-- Modal content-->`
      <div class="modal-content">
        <div class="modal-header">

          <h4 class="modal-title">Confirmation</h4>
        </div>
        <div class="modal-body">
          <h4>Is this Candidate
            <span class="_Cyanblue">Rejected</span> from moving forward?</h4>





          <div class="approveReject">

            <button class="_reject" data-dismiss="modal">NO</button>
            <button class="_success" data-dismiss="modal" (click)="submittechnicalfeedback('MINI_PG_COACH_REJECTED')">YES</button>


          </div>



      </div>

    </div>
  </div>




</div>

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

      <!-- Modal content-->`
      <div class="modal-content">
        <div class="modal-header">

          <h4 class="modal-title">Confirmation</h4>
        </div>
        <div class="modal-body">
          <h4>Is this Candidate
            <span class="_Cyanblue">Approved</span> for next level?</h4>





          <div class="approveReject">

            <button class="_reject" data-dismiss="modal">NO</button>
            <button class="_success" data-dismiss="modal" (click)="submittechnicalfeedback('MINI_PG_COACH_APPROVED')">YES</button>


          </div>



        </div>

      </div>
    </div>




  </div>

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

      <!-- Modal content-->`
      <div class="modal-content">
        <div class="modal-header">

          <h4 class="modal-title">Confirmation</h4>
        </div>
        <div class="modal-body">
          <h4>Is this Candidate
            <span class="_Cyanblue">Reviewed</span> for next level?</h4>





          <div class="approveReject">

            <button class="_reject" data-dismiss="modal">NO</button>
            <button class="_success" data-dismiss="modal" (click)="approve('MAIN_PG_COACH_REVIEWED')">YES</button>


          </div>



        </div>

      </div>
    </div>




  </div>

<!--

<div class="container col-sm-12 col-md-12 col-lg-12 " (click)="clickedoutside()">

  <div class="row">






    <section class="Section col-sm-12 col-md-12 col-lg-12" *ngIf="CandidateData">

      <div class="col-sm-12 col-md-12 col-lg-12 modal_coach" *ngIf="modal === 'showModal'">

        <div class="col-sm-2 col-md-2 col-lg-2"></div>
        <div class="col-sm-8 col-md-8 col-lg-8 modalWindow">

          <div class="col-sm-12 col-md-12 col-lg-12 modalHead">

            <span class="title"><img src="{{img_path + 'external-link-FontAwesome.png'}}"/>{{getFirstName(candt.infoDetails.userInfoMstr.fullName)}}'s Playground Files</span>
            <span class="closeModal" (click)="closeModal(modal)"><img src="{{img_path + 'cross-white.png'}}"/></span>
          </div>

          <div class="col-sm-12 col-md-12 col-lg-12 modalBody" >

            <div *ngIf="workSpaceSuccess; else notavailable" class="col-sm-12 col-md-12 col-lg-12 ">
              <div class="col-sm-2 col-md-2 col-lg-2"></div>

              <div class="col-sm-8 col-md-8 col-lg-8 avilable">

                <div class="col-sm-12 col-md-12 col-lg-12 launchbtn"><span (click)="showPlaygroundFiles()">Launch Workspace</span></div>

              </div>


            </div>

            <ng-template #notavailable>
              <div class="col-sm-3 col-md-3 col-lg-3"></div>

              <div class="col-sm-6 col-md-6 col-lg-6 notavailable">

                <div class="col-sm-12 col-md-12 col-lg-12 Label"><h2>We are fetching <span>{{getFirstName(candt.infoDetails.userInfoMstr.fullName)}}'s</span> Playground Files. </h2></div>



              </div>

            </ng-template>

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

      <div class="col-sm-12 col-md-3 col-lg-3 left_block">

        <div class="col-sm-12 col-md-12 col-lg-12 candidate_info">
          <div class="cdt_top_card">

            <a class="IMG">

              {{Initials(fulName)}}

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

              <h4 >
                {{candt.infoDetails.userInfoMstr.fullName}}
              </h4>

              <h5 >
                <span>{{candt.infoDetails.userInfoMstr.pgUserSkillMapping[0].pgSkillTrackDtls.skillTrackDtlsName}}</span> &nbsp; <span class="exp_level">{{getSubstring(candt.infoDetails.pgExperienceLevel.experienceLevel)}}</span>
              </h5>

              <div class="col-sm-12 col-md-12 col-lg-12 primary_skills ">

                <div class = " primarySkills" style="background-color: #A0D6E3;">
                  {{candt.infoDetails.userInfoMstr.pgUserSkillMapping[0].pgSkillTrackDtls.skillTrackDtlsName}}
                </div>

                &lt;!&ndash;<div class="primarySkills">
                  Maven
                </div>

                <div class="primarySkills">
                  EJB
                </div>&ndash;&gt;

              </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.infoDetails.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.infoDetails.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>


        <app-candidatecontactdetails [infoDetails]="candt.infoDetails"> </app-candidatecontactdetails>

      </div>



      <div  class="col-sm-12 col-md-9 col-lg-9 right_block" >

        <div *ngIf="showawspopover" class="Aws-alert"  >
          <div class="Aws-popover">
            <span class="Aws-popover-content">
                <h3 >Inspect the Usecase</h3>

              <h4 >Examine the Usecase by accessing the AWS Link</h4>
            </span>
          </div>
          <div class="Aws-popover-small">

          </div>
          <div class="Aws-popover-white">
            <span  class="aws" (click)="showPlaygroundFiles()"><h4><img src="{{img_path + 'external-link-FontAwesome.png'}}"/>{{getFirstName(candt.infoDetails.userInfoMstr.fullName)}}'s Playground Files</h4></span>
          </div>
        </div>

        <div class="col-sm-12 col-md-12 col-lg-12 Tests">

          <div class="col-sm-4 col-md-4 col-lg-4 testblock progress " (click)="evaluatingskill = 'Evaluation Report'"  >&lt;!&ndash;(click)="getMettleReport(candt.infoDetails.emailId)"&ndash;&gt;

            <div [class.active]="evaluatingskill == 'Evaluation Report'">

              <h4>Primary Skill Evaluation</h4>

              <div class="image">
                <img *ngIf="evaluatingskill == 'Evaluation Report'; else primary" src="{{img_path + 'MettleTest_icon.png'}}"/>
                <ng-template #primary>
                  <img src="{{img_path + 'MettleTest_icon.png'}}"/>
                </ng-template>
              </div>
              <div class="score"><h2>{{candt.eventDetails[0].eventScore || 0}}</h2></div>


            </div>
          </div>

          <div class="col-sm-4 col-md-4 col-lg-4 testblock progress techtest " [style.pointer-events]="techEnable" (click)="getTechnincalUsecaseResult(candt.infoDetails.userInfoMstr.status)">

            <div [class.active]="evaluatingskill == 'Technical Usecase Evaluation'">

              <h4>Technincal Skill Evaluation</h4>

              <div class="image">
                <img *ngIf="evaluatingskill == 'Technical Usecase Evaluation'; else tech" src="{{img_path + 'MiniPlayground_Selected_Icon.png'}}"/>
                <ng-template #tech>
                  <img src="{{img_path + 'MiniPlayground_Icon.png'}}"/>
                </ng-template>
              </div>
              <div class="score"><h2>{{candt.eventDetails[1].eventScore}}</h2></div>

            </div>

          </div>

          <div class="col-sm-4 col-md-4 col-lg-4 testblock progress " [style.pointer-events]="bussEnable" (click)="getBusinessUsecaseResult(candt.infoDetails.userInfoMstr.status)">

            <div [class.active]="evaluatingskill == 'Business Usecase Evaluation'">

              <h4>Business Skill Evaluation</h4>

              <div class="image">
                <img *ngIf="evaluatingskill == 'Business Usecase Evaluation'; else bsns" src="{{img_path + 'Playground_selected_Icon.png'}}"/>
                <ng-template #bsns>
                  <img src="{{img_path + 'Playground_Icon.png'}}"/>
                </ng-template>
              </div>
              <div class="score"><h2>{{candt.eventDetails[2].eventScore}}</h2></div>

            </div>

          </div>

        </div>

        <span class="evaluatingTest"><h2>{{evaluatingskill}}</h2></span>
        &lt;!&ndash;(click)="showmodal('tech','showModal')"&ndash;&gt;


        <span  *ngIf="evaluatingskill === 'Technical Usecase Evaluation'  " class="aws" (click)="showPlaygroundFiles()"><img src="{{img_path + 'external-link-FontAwesome.png'}}"/><h4>{{getFirstName(candt.infoDetails.userInfoMstr.fullName)}}'s Playground Files</h4></span>
        <span  *ngIf="evaluatingskill === 'Technical Usecase Evaluation' && candt.infoDetails.userInfoMstr.status != 'METTL_APPROVED'  " class="aws usecase" (click)="viewusecase('tech')"><h4>View Usecase</h4></span>


        <span  *ngIf="evaluatingskill === 'Business Usecase Evaluation' " class="aws" (click)="showPlaygroundFiles()"><img src="{{img_path + 'external-link-FontAwesome.png'}}"/><h4>{{getFirstName(candt.infoDetails.userInfoMstr.fullName)}}'s Playground Files</h4></span>
        <span  *ngIf="evaluatingskill === 'Business Usecase Evaluation' " class="aws usecase" (click)="viewusecase('bsns')"><h4>View Usecase</h4></span>

        <div *ngIf="Viewtechusecase" class="Viewusecase">

          <div class="col-sm-8 col-md-8 col-lg-8 modalWindow">

            <div class="col-sm-12 col-md-12 col-lg-12 modalHead">

              <span class="title">User Authentication System</span>
              <span class="closeModal" (click)="closeusecase()"><img src="{{img_path + 'close-material.png'}}"/></span>
            </div>

            <div class="col-sm-12 col-md-12 col-lg-12 modalBody" >

              <p class="file-content-info" [innerHTML]="techusecaseINFO.usecaseDescription"></p>
              <div  class="col-sm-12 col-md-12 col-lg-12 report">

                &lt;!&ndash;<iframe  [src]="junk"></iframe>&ndash;&gt;
                <object type="text/html" [data]="junk" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
                </object>
                &lt;!&ndash;<embed class="iframe" [src]="mettleReport" type='application/pdf' >&ndash;&gt;

              </div>

            </div>
          </div>

        </div>

        <div *ngIf="Viewbsnsusecase" class="Viewusecase">

          <div class="col-sm-8 col-md-8 col-lg-8 modalWindow">

            <div class="col-sm-12 col-md-12 col-lg-12 modalHead">

              <span class="title">User Authentication System</span>
              <span class="closeModal" (click)="closeusecase()"><img src="{{img_path + 'close-material.png'}}"/></span>
            </div>

            <div class="col-sm-12 col-md-12 col-lg-12 modalBody" >

              <p class="file-content-info" [innerHTML]="bsnsusecaseINFO.usecaseDescription"></p>


            </div>
          </div>

        </div>

        <div *ngIf="evaluatingskill == 'Evaluation Report'" class="col-sm-12 col-md-12 col-lg-12 report">

          &lt;!&ndash;<iframe  [src]="mettleReport"></iframe>&ndash;&gt;

          <embed class="iframe" [src]="mettleReport" type='application/pdf' >

        </div>



        <div *ngIf="evaluatingskill == 'Technical Usecase Evaluation'" class="col-sm-12 col-md-12 col-lg-12 report technicalreport">


          <div class="col-sm-12 col-md-12 col-lg-12 report technicalreport" *ngIf="candt.infoDetails.userInfoMstr.status == 'MINI_PG_STARTED' || candt.infoDetails.userInfoMstr.status == 'COACH_ASSIGNED'; else coachApproved">

            <div class="col-sm-12 col-md-12 col-lg-12 coreEvaluation Inprogress">

              <figure>
                <img src="{{img_path + 'noun_676770_cc.png'}}"/>
              </figure>
              <h3>Test in progress</h3>


            </div>

          </div>

          <ng-template #coachApproved>

            <div class="col-sm-12 col-md-12 col-lg-12 report technicalreport" *ngIf="candt.infoDetails.userInfoMstr.status == 'MINI_PG_COACH_APPROVED'; else techScoreCard">

              <div class="col-sm-12 col-md-12 col-lg-12 coreEvaluation Inprogress">

                <figure>
                  <img src="{{img_path + 'success_icon.png'}}"/>
                </figure>
                <h2>Thank you</h2>
                <h3>you have successfully completed the Technical Usecase evaluation</h3>

                <button class="done_button">Done</button>
              </div>

            </div>

          </ng-template>
          <ng-template #techScoreCard>


            <div *ngIf="techEval == 'Core'" class="col-sm-12 col-md-12 col-lg-12 coreEvaluation">

              <div class="col-sm-12 col-md-12 col-lg-12 core">
                <h3>{{techEval}}</h3>

                <div class="weightedScore">
                  <h5>C-Score</h5>
                  <span>{{coreScore}}</span>
                </div>
              </div>
              <div class="col-sm-12 col-md-12 col-lg-12 evaluations">

                <div class="col-sm-12 col-md-12 col-lg-12 evaluateCriteria" *ngFor="let coreCCIndex of description; let rowcount = index">

                  <div *ngIf="coreCCIndex.parameter == techEval">

                    <h5>{{coreCCIndex.capabilityAreas}}</h5>
                    <div class="_score col-sm-6 col-md-6 col-lg-6 ">

                      <mat-slider (change)="score(mat.value,commentCoreTech.value,coreCCIndex.eventCapabilityId)"
                                  [class.rRed] = "coreCCIndex.rating * 10  < 40"
                                  [class.Bblue] = "coreCCIndex.rating * 10  > 39 && coreCCIndex.rating * 10  <60"
                                  [class.Lgreen] = "coreCCIndex.rating * 10  > 59 "
                                  [disabled]="cmtEnable"
                                  [invert]="invert"
                                  [max]="max"
                                  [min]="min"
                                  [step]="step"
                                  [thumb-label]="thumbLabel"
                                  [tick-interval]="tickInterval"
                                  [value]="coreCCIndex.rating * 10"
                                  [vertical]="vertical" #mat>
                      </mat-slider><br/>
                      <span class="sliderRating">
                      <span *ngFor="let score of scorecard"  ><h5 [class.active]="score == coreCCIndex.rating"> {{score}} </h5></span>
                        </span>
                      &lt;!&ndash; <div *ngFor="let score of scorecard;s let rowcount = index" (click)="getMindScore(score, rowcount)" [class.Rred]="rowcount <= point1"></div>&ndash;&gt;
                    </div>

                    <div class="_score col-sm-6 col-md-6 col-lg-6">

                      <textarea rows="3" cols="26" placeholder="Comments..." #commentCoreTech [value]="coreCCIndex.comment" [readonly]="cmtEnable" [(ngModel)]="coreCCIndex.comment"  (keyup)="score(mat.value,commentCoreTech.value,coreCCIndex.eventCapabilityId)"> </textarea>
                    </div>
                  </div>
                  &lt;!&ndash;<h5>Managing Ambiguity</h5>
                  <div class="_score">
                    <div *ngFor="let score of scorecard; let rowcount = index" (click)="getManageAmbScore(score, rowcount)" [class.Rred]="rowcount <= digitechpoint1"></div>
                  </div>&ndash;&gt;
                </div>



              </div>


            </div>

            <div *ngIf="techEval == 'Digital'" class="col-sm-12 col-md-12 col-lg-12 coreEvaluation">

              <div class="col-sm-12 col-md-12 col-lg-12 core">
                <h3>{{techEval}}</h3>

                <div class="weightedScore">
                  <h5>D-Score</h5>
                  <span>{{digiScore}}</span>
                </div>
              </div>
              <div class="col-sm-12 col-md-12 col-lg-12 evaluations">

                <div class="col-sm-12 col-md-12 col-lg-12 evaluateCriteria" *ngFor="let coreCCIndex of description; let rowcount = index">

                  <div *ngIf="coreCCIndex.parameter == techEval">

                    <h5>{{coreCCIndex.capabilityAreas}}</h5>
                    <div class="_score col-sm-6 col-md-6 col-lg-6 ">

                      <mat-slider (change)="score(mat.value,commentCoreTech.value,coreCCIndex.eventCapabilityId)"
                                  [class.rRed] = "coreCCIndex.rating   < 40"
                                  [class.Bblue] = "coreCCIndex.rating   > 39 && coreCCIndex.rating   <60"
                                  [class.Lgreen] = "coreCCIndex.rating   > 59 "
                                  [disabled]="cmtEnable"
                                  [invert]="invert"
                                  [max]="max"
                                  [min]="min"
                                  [step]="step"
                                  [thumb-label]="thumbLabel"
                                  [tick-interval]="tickInterval"
                                  [value]="coreCCIndex.rating "
                                  [vertical]="vertical" #mat>
                      </mat-slider>
                      <span class="sliderRating">
                      <span *ngFor="let score of scorecard"  ><h5 [class.active]="score == mat.value"> {{score}} </h5></span>
                        </span>

                      &lt;!&ndash; <div *ngFor="let score of scorecard; let rowcount = index" (click)="getMindScore(score, rowcount)" [class.Rred]="rowcount <= point1"></div>&ndash;&gt;
                    </div>

                    <div class="_score col-sm-6 col-md-6 col-lg-6">

                      <textarea rows="3" cols="26" placeholder="Comments..." #commentCoreTech [value]="coreCCIndex.comment" [readonly]="cmtEnable" [(ngModel)]="coreCCIndex.comment"  (keyup)="score(mat.value,commentCoreTech.value,coreCCIndex.eventCapabilityId)"> </textarea>
                    </div>
                  </div>
                  &lt;!&ndash;<h5>Managing Ambiguity</h5>
                  <div class="_score">
                    <div *ngFor="let score of scorecard; let rowcount = index" (click)="getManageAmbScore(score, rowcount)" [class.Rred]="rowcount <= digitechpoint1"></div>
                  </div>&ndash;&gt;
                </div>



              </div>


            </div>



            <div *ngIf="techEval == ''" class="col-sm-12 col-md-12 col-lg-12 coreEvaluation scoreCard">

              <div class="col-sm-4 col-md-4 col-lg-4 scoreCardleft" >

                <div class="coreScore "  (mouseover)="val = 'core'" (mouseout)="val = ''" (click)="showCoreTech('Core')">
                  <img *ngIf="val == 'core'" src="{{img_path + 'edit.png'}}" (click)="showCoreTech('Core')" class="pull-right"/>
                  <h5> Core</h5>
                  <h2>{{coreScore}}</h2>

                </div>

                <div class=" digiscore "   (mouseover)="val = 'digi'" (mouseout)="val = ''" (click)="showCoreTech('Digital')">
                  <img *ngIf="val == 'digi'" src="{{img_path + 'edit.png'}}" (click)="showCoreTech('Digital')" class="pull-right"/>
                  <h5> Digital</h5>
                  <h2>{{digiScore}}</h2>
                </div>

              </div>

              <div class="col-sm-8 col-md-8 col-lg-8 scoreCardright">

                &lt;!&ndash;<mat-progress-spinner
                  class="mat-progress-spinner example-margin"
                  mode="determinate"
                  strokeWidth="7"

                  [value]="coreScore + digiScore">
                </mat-progress-spinner>&ndash;&gt;
                <div class="totalScore">
                  <mat-progress-spinner
                    class="mat-progress-spinner example-margin"
                    mode="determinate"
                    [attr.color]="color"
                    strokeWidth="6"
                    [value]="coreScore + digiScore">

                  </mat-progress-spinner>
                  <div class="scorePosition">
                    <h2>{{coreScore + digiScore }}</h2>
                    <h4>SCORE</h4>
                  </div>
                </div>

                <div class="commentBox" *ngIf="userData.userInfoMstr.status == 'MINI_PG_COMPLETED'">
                  <textarea rows="3" cols="26" placeholder="Your feedback..." [(ngModel)]="overAllComment"> </textarea>
                  &lt;!&ndash;<input placeholder="Your feedback..." [(ngModel)]="overAllComment" />&ndash;&gt;

                </div>
                <div class="acptrjct" *ngIf="userData.userInfoMstr.status == 'MINI_PG_COMPLETED'">

                  <span class="reject"  data-toggle="modal" data-target="#techrejectModal"><h5>Reject</h5></span>

                  <span class="approve"  data-toggle="modal" data-target="#techapproveModal"><h5>Approve</h5></span>

                </div>

                <div class="acptrjctErr" *ngIf="eveDlts[1].eventOutput == 'MINI_PG_COACH_REJECTED'">
                  <span class="stsErr"> {{statusMsg}}</span>
                </div>

                <div class="acptrjctSucc" *ngIf="eveDlts[1].eventOutput == 'MINI_PG_COACH_APPROVED'">
                  <span class="stsSucc"> {{statusMsg}}</span>
                </div>

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

                    &lt;!&ndash; Modal content&ndash;&gt;`
                    <div class="modal-content">
                      <div class="modal-header">

                        <h4 class="modal-title">Confirmation</h4>
                      </div>
                      <div class="modal-body">
                        <h5>Is this Candidate Approved to move forward?</h5>
                        <div class="modalbuttons ">
                          <button class="modalbutton1" data-dismiss="modal" ><p class="no"> No </p></button>
                          <button class="modalbutton2" data-dismiss="modal"  (click)="submittechnicalfeedback('MINI_PG_COACH_APPROVED')"><p class="yes"> Yes </p></button>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>

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

                    &lt;!&ndash; Modal content&ndash;&gt;`
                    <div class="modal-content">
                      <div class="modal-header">

                        <h4 class="modal-title">Confirmation</h4>
                      </div>
                      <div class="modal-body">
                        <h5>Is this Candidate Rejected from moving forward?</h5>
                        <div class="modalbuttons ">
                          <button class="modalbutton1" data-dismiss="modal" ><p class="no"> No </p></button>
                          <button class="modalbutton2" data-dismiss="modal"  (click)="submittechnicalfeedback('MINI_PG_COACH_REJECTED')"><p class="yes"> Yes </p></button>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>

              </div>

            </div>




          </ng-template>




        </div>

        <div class="commentBox" *ngIf="evaluatingskill == 'Technical Usecase Evaluation' && techEval == 'Core' || evaluatingskill == 'Technical Usecase Evaluation' && techEval == 'Digital'">


          <span *ngIf="techEval != 'Core'" id="Back" [class.active]="techEval != 'Core'" (click)="back(techEval)">Back</span>

          <div class="usecaseNavig hide">

            <span  [class.BlueNavig]="techEval == 'Digital'"  (click)="showCoreTech('Digital')"></span>
            <span  [class.BlueNavig]="techEval == 'Core'"  (click)="showCoreTech('Core')"></span>

          </div>
          <span *ngIf="techEval == 'Core'" [class.active]="true"  (click)="nextDigit(techEval)">Next</span>
          <span *ngIf="techEval == 'Digital'"  [class.active]="true"  (click)="next(techEval)">Next</span>

        </div>

        <div *ngIf="evaluatingskill == 'Business Usecase Evaluation'" class="col-sm-12 col-md-12 col-lg-12 report technicalreport">


          <div class="col-sm-12 col-md-12 col-lg-12 report technicalreport" *ngIf=" candt.infoDetails.userInfoMstr.status == 'MAIN_PG_STARTED' || candt.infoDetails.userInfoMstr.status == 'MAIN_PG_COACH_ASSIGNED'; else minipgcoachapproved">

            <div class="col-sm-12 col-md-12 col-lg-12 coreEvaluation Inprogress">

              <figure>
                <img src="{{img_path + 'noun_676770_cc.png'}}"/>
              </figure>
              <h3>Test in progress</h3>


            </div>

          </div>

          <ng-template #minipgcoachapproved>

            <div class="col-sm-12 col-md-12 col-lg-12 report technicalreport" *ngIf="candt.infoDetails.userInfoMstr.status == 'MAIN_PG_MANAGER_APPROVED'; else bussScoreCard">

              <div class="col-sm-12 col-md-12 col-lg-12 coreEvaluation Inprogress">

                <figure>
                  <img src="{{img_path + 'success_icon.png'}}"/>
                </figure>
                <h2>Thank you</h2>
                <h3>you have successfully completed the Business Usecase evaluation</h3>

                <button class="done_button">Done</button>
              </div>

            </div>

          </ng-template>

          <ng-template #bussScoreCard>

            <div *ngIf="bsnsEval == 'Core'" class="col-sm-12 col-md-12 col-lg-12 coreEvaluation">

              <div class="col-sm-12 col-md-12 col-lg-12 core">
                <h3>{{bsnsEval}}</h3>

                <div class="weightedScore">
                  <h5>C-Score</h5>
                  <span>{{corebsnsScore}}</span>
                </div>
              </div>

              <div class="col-sm-12 col-md-12 col-lg-12 evaluations">

                <div class="col-sm-12 col-md-12 col-lg-12 evaluateCriteria" *ngFor="let coreCCIndex of description; let rowcount = index">

                  <div *ngIf="coreCCIndex.parameter == bsnsEval">

                    <h5>{{coreCCIndex.capabilityAreas}}</h5>
                    <div class="_score col-sm-6 col-md-6 col-lg-6 ">

                      <mat-slider (change)="scoreBsn(mat.value,commentCoreTech.value,coreCCIndex.eventCapabilityId)"
                                  [class.rRed] = "coreCCIndex.rating * 10  < 40"
                                  [class.Bblue] = "coreCCIndex.rating * 10  > 39 && coreCCIndex.rating * 10  <60"
                                  [class.Lgreen] = "coreCCIndex.rating * 10  > 59 "

                                  [disabled]="disabled"
                                  [invert]="invert"
                                  [max]="max"
                                  [min]="min"
                                  [step]="step"
                                  [thumb-label]="thumbLabel"
                                  [tick-interval]="tickInterval"
                                  [value]="coreCCIndex.rating * 10"
                                  [vertical]="vertical" #mat>
                      </mat-slider>
                      <span class="sliderRating">
                      <span *ngFor="let score of scorecard"  ><h5 [class.active]="score == mat.value / 10"> {{score}} </h5></span>
                        </span>
                      &lt;!&ndash; <div *ngFor="let score of scorecard; let rowcount = index" (click)="getMindScore(score, rowcount)" [class.Rred]="rowcount <= point1"></div>&ndash;&gt;
                    </div>

                    <div class="_score col-sm-6 col-md-6 col-lg-6">

                      <textarea rows="3" cols="26" placeholder="Comments..." #commentCoreTech [value]="coreCCIndex.comment" [(ngModel)]="coreCCIndex.comment"  (keyup)="score(mat.value,commentCoreTech.value,coreCCIndex.eventCapabilityId)"> </textarea>
                    </div>
                  </div>
                  &lt;!&ndash;<h5>Managing Ambiguity</h5>
                  <div class="_score">
                    <div *ngFor="let score of scorecard; let rowcount = index" (click)="getManageAmbScore(score, rowcount)" [class.Rred]="rowcount <= digitechpoint1"></div>
                  </div>&ndash;&gt;
                </div>


              </div>


            </div>

            <div *ngIf="bsnsEval == 'Digital'" class="col-sm-12 col-md-12 col-lg-12 coreEvaluation">

              <div class="col-sm-12 col-md-12 col-lg-12 core">
                <h3>{{bsnsEval}}</h3>

                <div class="weightedScore">
                  <h5>D-Score</h5>
                  <span>{{digibsnsScore}}</span>
                </div>
              </div>

              <div class="col-sm-12 col-md-12 col-lg-12 evaluations">


                <div class="col-sm-12 col-md-12 col-lg-12 evaluateCriteria" *ngFor="let coreCCIndex of description; let rowcount = index">

                  <div *ngIf="coreCCIndex.parameter == bsnsEval">

                    <h5>{{coreCCIndex.capabilityAreas}}</h5>
                    <div class="_score col-sm-6 col-md-6 col-lg-6 ">

                      <mat-slider (change)="scoreBsn(mat.value,commentCoreTech.value,coreCCIndex.eventCapabilityId)"
                                  [class.rRed] = "coreCCIndex.rating * 10  < 40"
                                  [class.Bblue] = "coreCCIndex.rating * 10  > 39 && coreCCIndex.rating * 10  <60"
                                  [class.Lgreen] = "coreCCIndex.rating * 10  > 59 "
                                  [disabled]="disabled"
                                  [invert]="invert"
                                  [max]="max"
                                  [min]="min"
                                  [step]="step"
                                  [thumb-label]="thumbLabel"
                                  [tick-interval]="tickInterval"
                                  [value]="coreCCIndex.rating * 10"
                                  [vertical]="vertical" #mat>
                      </mat-slider>
                      <span class="sliderRating">
                      <span *ngFor="let score of scorecard"  ><h5 [class.active]="score == mat.value / 10"> {{score}} </h5></span>
                        </span>
                      &lt;!&ndash; <div *ngFor="let score of scorecard; let rowcount = index" (click)="getMindScore(score, rowcount)" [class.Rred]="rowcount <= point1"></div>&ndash;&gt;
                    </div>

                    <div class="_score col-sm-6 col-md-6 col-lg-6">

                      <textarea rows="3" cols="26" placeholder="Comments..." #commentCoreTech [value]="coreCCIndex.comment" [(ngModel)]="coreCCIndex.comment"  (keyup)="score(mat.value,commentCoreTech.value,coreCCIndex.eventCapabilityId)"> </textarea>
                    </div>
                  </div>
                  &lt;!&ndash;<h5>Managing Ambiguity</h5>
                  <div class="_score">
                    <div *ngFor="let score of scorecard; let rowcount = index" (click)="getManageAmbScore(score, rowcount)" [class.Rred]="rowcount <= digitechpoint1"></div>
                  </div>&ndash;&gt;
                </div>

              </div>


            </div>

            <div *ngIf="bsnsEval == ''" class="col-sm-12 col-md-12 col-lg-12 coreEvaluation scoreCard">

              <div class="col-sm-4 col-md-4 col-lg-4 scoreCardleft" >

                <div class="coreScore "  (mouseover)="val = 'bscore'" (mouseout)="val = ''" (click)="showCoreBusn('Core')">
                  <img *ngIf="val == 'bscore'" src="{{img_path + 'edit.png'}}"  class="pull-right"/>
                  <h5> Core</h5>
                  <h2>{{corebsnsScore}}</h2>

                </div>

                <div class=" digiscore "  (mouseover)="val = 'bsdigi'" (mouseout)="val = ''" (click)="showCoreBusn('Digital')">
                  <img *ngIf="val == 'bsdigi'" src="{{img_path + 'edit.png'}}"  class="pull-right"/>
                  <h5> Digital</h5>
                  <h2>{{digibsnsScore}}</h2>
                </div>

              </div>

              <div class="col-sm-8 col-md-8 col-lg-8 scoreCardright">



                <div class="totalScore">

                  <mat-progress-spinner
                    class="mat-progress-spinner example-margin"
                    mode="determinate"
                    [attr.color]="color"
                    strokeWidth="6"
                    [value]="corebsnsScore + digibsnsScore"
                  >

                  </mat-progress-spinner>
                  <div class="scorePosition">
                    <h2>{{ corebsnsScore + digibsnsScore }}</h2>
                    <h4>SCORE</h4>
                  </div>

                </div>

                <div class="commentBox" *ngIf="userData.userInfoMstr.status == 'MAIN_PG_COMPLETED'">

                  <textarea rows="3" cols="26" placeholder="Your feedback..." [(ngModel)]="bsnoverAllComment"> </textarea>

                  &lt;!&ndash; <input placeholder="Your feedback..." [(ngModel)]="bsnoverAllComment"/>&ndash;&gt;

                </div>
                <div class="acptrjct" *ngIf="userData.userInfoMstr.status == 'MAIN_PG_COMPLETED'">

                  <span class="approve"  (click)="approve('MAIN_PG_COACH_REVIEWED')" ><h5>Submit</h5></span>

                </div>

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

                    &lt;!&ndash; Modal content&ndash;&gt;`
                    <div class="modal-content">
                      <div class="modal-header">

                        <h4 class="modal-title">Confirmation</h4>
                      </div>
                      <div class="modal-body">
                        <h5>Does the Candidate <span class="exp_level">Reviewed?</span></h5>
                        <div class="modalbuttons ">
                          <button class="modalbutton1" data-dismiss="modal" ><p class="no"> No </p></button>
                          <button class="modalbutton2" data-dismiss="modal"  (click)="approve('MAIN_PG_COACH_REVIEWED')"><p class="yes"> Yes </p></button>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>


                <div class="acptrjctSucc" *ngIf="eveDlts[2].eventOutput == 'MAIN_PG_COACH_REVIEWED'">
                  <span class="stsSucc"> {{statusMsg}}</span>
                </div>


              </div>

            </div>

          </ng-template>
        </div>

        <div class="commentBox" *ngIf="evaluatingskill == 'Business Usecase Evaluation' && bsnsEval == 'Core' || evaluatingskill == 'Business Usecase Evaluation' && bsnsEval == 'Digital'">


          <span *ngIf="bsnsEval != 'Core'" id="BackDigi" [class.active]="bsnsEval != 'Core'" (click)="backbsns(bsnsEval)">Back</span>

          <div class="usecaseNavig hide">

            <span  [class.BlueNavig]="bsnsEval == 'Digital'"  (click)="showCoreBusn('Digital')"></span>
            <span  [class.BlueNavig]="bsnsEval == 'Core'"  (click)="showCoreBusn('Core')"></span>

          </div>

          <span *ngIf="bsnsEval == 'Core'" [class.active]="true"  (click)="nextbsns(bsnsEval)">Next</span>
          <span *ngIf="bsnsEval == 'Digital'"  [class.active]="true"  (click)="nextbsnsDigit(bsnsEval)">Next</span>
          &lt;!&ndash;<span [class.active]="bsnsEval == 'Core'"  (click)="nextbsns(bsnsEval)">Next</span>&ndash;&gt;

        </div>

      </div>


    </section>


  </div>


</div>

-->
</div>
