<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-md-4">
      <div class="col-sm-12 col-md-12 col-lg-12 left_block">
        <div class="col-sm-12 col-md-12 col-lg-12 candidate_info">
          <div class="cdt_top_card">
            <a class="IMG">
              {{Initials(candt.infoDetails.userInfoMstr.fullName)}}
            </a>
            <div class="col-sm-12 col-md-12 col-lg-12 candidate">
              <h4>
                {{candt.infoDetails.userInfoMstr.fullName}}
              </h4>
              <h5>
                <span>{{candt.infoDetails.jobId}}</span> &nbsp; <span class="exp_level">{{getSubstring(candt.infoDetails.pgExperienceLevel.experienceLevel)}}</span>
              </h5>
              <div class="badges">
                <app-ta-skill-badges *ngFor="let _skill of candt.infoDetails.userInfoMstr.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.infoDetails.city}} , {{candt.infoDetails.country}}</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 class="col-sm-12 col-md-12 col-lg-12 cdt_bottom_card">

            <div class="assignCandidateToCoach">

              <div *ngIf="selectedUseCase == 'primaryUseCase' || selectedUseCase == 'technicalUseCase' || selectedUseCase == 'bussniessUseCase' "  class="assignHere cursorPointer" (click)="assign()">
                    <span *ngIf="viewProfile">
                      <img src="{{imageUrl}}/assets/img/pgflow/coach_icon@2x.png"/>Assign Coach</span>
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

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

      <mat-card>
        <div class="container-fluid">
          <div class="row">
          <div class="col-md-4">
            <h4 class="candidate-details">Candidate Details :</h4>
          </div>

          </div>
          <div class="row">
            <div class="col-md-5 usrDtls">
              <span class="labelText">Email:</span><br>
              <span class="valueText">{{candt.infoDetails.emailId}}</span><br>
              <span class="labelText">Phone:</span><br>
              <span class="valueText">{{candt.infoDetails.contactNumber}}</span><br>
              <span class="labelText">City:</span><br>
              <span class="valueText">{{candt.infoDetails.city}}</span><br>
              <span class="labelText">Twitter ID:</span><br>
              <span class="valueText">{{candt.infoDetails.twitter}}</span><br>
              <span class="labelText">Linkedin ID:</span><br>
              <span class="valueText">{{candt.infoDetails.linkedInId}}</span><br>

            </div>
            <div class="col-md-5">
              <span class="labelText">Alternative Email:</span><br>
              <span class="valueText">{{candt.infoDetails.alternativeEmail}}</span><br>
              <span class="labelText">Alternative Phone:</span><br>
              <span class="valueText">{{candt.infoDetails.alternativeContact}}</span><br>
              <span class="labelText">Address:</span><br>
              <span class="valueText">{{candt.infoDetails.addressLine1}}</span><br>
              <span class="labelText">Google ID:</span><br>
              <span class="valueText">{{candt.infoDetails.googleId}}</span><br>
              <span class="labelText">Facebook ID:</span><br>
              <span class="valueText">{{candt.infoDetails.facebookId}}</span><br>
            </div>
            <div class="col-md-2"></div>

          </div>

          <div class="row"></div>
          <div class="row">
            <div class="col-md-9"></div>
            <div class="col-md-3">
              <div class="rectangle" (click)="viewResume(candt.infoDetails.profileId)">
                <p class="view-resume">VIEW RESUME</p>
              </div>
            </div>

          </div>
        </div>
      </mat-card>
    </div>
  </div>

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

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

</ng-template>


<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#assignModal"></button>
<!-- TODO ASSIGN COACH Modal -->
<div *ngIf="PGMCandidateDtls" id="assignModal" class="modal fade skill-modal" role="dialog">
  <div class="modal-dialog admin-modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
      <div class="row rowCls">
          <div [class]="candiDiv">
            <h4 class="modal-title">Candidate</h4>
          </div>

          <div [class]="candiDiv">
            <h4 class="modal-title">Assign Coach</h4>
          </div>
          <div [class]="closeDiv" *ngIf="assessDiv">
            <h4 class="modal-title">Assessment</h4>
          </div>
          <a (click)="closeModal()">
            <button type="button" id="closeAssignCoachModal" class="close" data-dismiss="modal">&times;</button>
          </a>

        </div>
        <!--<button type="button" id="" class="close" data-dismiss="modal">&times;</button>-->
      </div>

      <div class="row rowCls">
        <div [class]="candiDiv" >
          <div class="modal-title lineVet">

              <a class="IMG">

                {{Initials(candt.infoDetails.userInfoMstr.fullName)}}

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

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

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



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

              </div>

          </div>
        </div>

        <div [class]="candiDiv">
          <div class="row allCoachs">
          <div [class]="lineDiv">

            <div class="col-sm-12 col-md-6 col-lg-6 modal_right_block" *ngIf="coaches.length !== 0; else noCoach">

              <div class="cdt_top_card" *ngFor="let coach of coaches; let idx = index">

                    <div class="cdt_top_cards">
                    <app-assign-coach-details fullName={{coach.userInfoMstr.fullName}} position={{coach.jobId}}
                                              role="UI Developer"></app-assign-coach-details>

                <input class="radioBtn" type="radio" name="radiogroup"
                       [value]="coach.coachId"
                       (change)="onSelectionChange(coach)">
              </div>
              </div>

            </div>
            <ng-template #noCoach>
              <div class="col-sm-12 col-md-6 col-lg-6 modal_right_block">

                <h3 class="noCoach">No Coach Available</h3>

              </div>
            </ng-template>
            <div *ngIf="coaches.length !== 0" class="confirmCoach" (click)="submitCoachtoCandidateAssignment(selectedEntry.userInfoMstr.userInfoMstrId, candidateInfo.userInfoMstr.userInfoMstrId, candidateInfo.adId)"></div>

          </div>
          </div>
          <div class="row">
          <div>
            <button *ngIf="selectedUseCase == 'technicalUseCase'" [disabled]="assignBtnEnable" class="rectBoxEvnt" (click)="workSpaceAssignCoach(selectedEntry.userInfoMstr.userInfoMstrId,eventDetails[1].eventDtlsId,candt.infoDetails.adId)">

              <img class="checkIcon" src="{{imageUrl}}/assets/img/pgflow/Check_icon.png">

            </button>
            <button *ngIf="selectedUseCase == 'bussniessUseCase'" [disabled]="assignBtnEnable" class="rectBoxEvnt" (click)="workSpaceAssignCoach(selectedEntry.userInfoMstr.userInfoMstrId,eventDetails[2].eventDtlsId,candt.infoDetails.adId)">

              <img class="checkIcon" src="{{imageUrl}}/assets/img/pgflow/Check_icon.png">

            </button>
          </div>

          </div>
        </div>
        <div [class]="closeDiv" *ngIf="assessDiv">
          <div class="row candidateDtlsModal">
            <app-assessmentdetail-component [Schedules] = Schedules  [skills]= masterSkills [userData]=candt (assessmentId)="goToAssessmentId($event)" class="col-sm-12 col-md-6"></app-assessmentdetail-component>
          </div>

          <div class="row">

          <div class="statusBtnDiv">

            <!--<div [class]="autoSchedule" (click)="selectSchedule('auto')">

              <img class="checkIcon imgDiv" (click)="selectSchedule('auto')" src="./../../../assets/img/pgflow/AutoSchedule.png">

              <p class="texDiv" (click)="selectSchedule('auto')">Auto Schedule</p>

            </div>-->
            <div [class]="coachSchedule" (click)="selectSchedule('coach')">

            <img (click)="selectSchedule('coach')" class="imgDiv2" src="{{imageUrl}}/assets/img/pgflow/coach_icon_Active.png">

            <p class="texDiv2" (click)="selectSchedule('coach')">Coach Intervention</p>
            </div>
          </div>

          </div>

          <div class="row">

            <button *ngIf="selectedUseCase == 'primaryUseCase'" [disabled]="assignBtnEnable" class="rectBox" (click)="scheduleAssignCoach(selectedEntry.userInfoMstr.userInfoMstrId,eventDetails[0].eventDtlsId)">

              <img class="checkIcon" src="{{imageUrl}}/assets/img/pgflow/Check_icon.png">

            </button>
            <button *ngIf="selectedUseCase == 'technicalUseCase'" [disabled]="assignBtnEnable" class="rectBox" (click)="scheduleAssignCoach(selectedEntry.userInfoMstr.userInfoMstrId,eventDetails[1].eventDtlsId)">

              <img class="checkIcon" src="{{imageUrl}}/assets/img/pgflow/Check_icon.png">

            </button>
            <button *ngIf="selectedUseCase == 'bussniessUseCase'" class="rectBox" [disabled]="assignBtnEnable" (click)="scheduleAssignCoach(selectedEntry.userInfoMstr.userInfoMstrId,eventDetails[2].eventDtlsId)">

              <img class="checkIcon" src="{{imageUrl}}/assets/img/pgflow/Check_icon.png">

            </button>

          </div>
        </div>

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

<button id="assignModalButton" [hidden]="true" data-toggle="modal" data-target="#adminModal"></button>
<!-- TODO RESUME VIEW MODAL DIALOG BOX -->
<div id="adminModal" class="modal fade skill-modal" role="dialog">
  <div class="modal-dialog admin-modal-dialog">
    <!-- Modal content-->
    <div class="modal-content" style="height: 538px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" style="margin-top: 0px">&times;</button>
        <h4 class="modal-title">View Resume </h4>
      </div>
      <div *ngIf="mettleReport">
        <object style="height: 470px;width: 100%;" [data] ='sanitizer.bypassSecurityTrustResourceUrl(mettleReport)'></object>
      </div>
    </div>
  </div>
</div>
