
<div class="container-fluid">

  <div class="row">
    <div class="col-lg-9"></div>
    <div class="col-lg-3">
      <button class="recommend-course" (click)="assignBtnClick()">Assign Coach</button>
    </div>
  </div>

  <div class="row">
    <!-- <h2> Assign Coach Detail Page working</h2>-->
    <!--<app-candidate-info [fullName]="candidate.infoDetails.fullName" [experienceLevel]="candidate.infoDetails.resExperienceLevel" [jobId]="candidate.infoDetails.jobId"> </app-candidate-info>-->
    <!--<app-skills [skills]="candidate.infoDetails.userInfoMstr.pgUserSkillMapping"></app-skills>-->
    <div class="capability-transformation-slider">
      <app-slider [valueStep]='300'>
        <app-employee-course-card [course]="course" [class.selected]="course.selected" class="course-selection" (selectCourseEvent)="selectCourseEmp(course)" *ngFor="let course of selectedCoursesEmployeeDetails"></app-employee-course-card>
      </app-slider>
    </div>
  </div>

  <button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#assignModal"></button>
  <!-- Modal -->
  <div 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="col-lg-6">
              <h4 class="modal-title">Employee</h4>
            </div>

            <div class="col-lg-5">
              <h4 class="modal-title">Assign Coach</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="col-lg-6 splitLine" >
            <div class="modal-title" *ngFor="let course of courseEmployeLists">

              <div *ngIf="course.candidate">
                <app-candidate-info [fullName]="course.candidate.userInfoMstr.fullName" [experienceLevel]="course.candidate.experienceLevel" [jobId]="course.candidate.jobId"> </app-candidate-info>
                <app-skills [skills]="course.candidate.userInfoMstr.pgUserSkillMapping"></app-skills>
              </div>
              <h3 class="courseDtls">

                {{course.courseName}}

              </h3>
              <div>
                <h3 class=""></h3>
              </div>
            </div>
          </div>

          <div class="col-lg-6" *ngIf="true">
            <div class="modal-title">

              <div class="rightDiv" *ngIf="coaches.length !== 0; else noCoach">

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

                  <!-- <a class="IMG">

                     {{ Intials(coach.userInfoMstr.fullName) }}

                   </a>
                   <div class="candidate">

                     <h4 >
                       {{coach.userInfoMstr.fullName}}
                     </h4>

                     <h5 >
                       <span>{{coach.userInfoMstr.pgUserSkillMapping[0].pgSkillTrackDtls.pgSkillTrackMstr.description}}</span> &nbsp;  <span class="exp_level"></span>
                     </h5>


                   </div>-->
                  <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.userInfoMstr.userInfoMstrId"
                           (change)="onSelectCoach(coach.userInfoMstr.userInfoMstrId)">
                  </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 class="row">

              <div class="rectBox" (click)="scheduleAssignCoach()">

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

              </div>
            </div>

          </div>


          <!--<button (click)="clickExpend()">Assign coach is UI works!</button>-->
        </div>

      </div>

    </div>
  </div>



</div>




