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


  <div class="cdt_top_card"  (click)="Selected(candidate.userDetails.infoDetails.userInfoMstr.userInfoMstrId,candidate.courseId,candidate.courseDetails[0])">

    <app-candidate-info [fullName]="candidate.userDetails.infoDetails.fullName" [experienceLevel]="candidate.userDetails.infoDetails.resExperienceLevel" [jobId]="candidate.userDetails.infoDetails.jobId"> </app-candidate-info>

    <app-skills [skills]="candidate.userDetails.infoDetails.userInfoMstr.pgUserSkillMapping"></app-skills>


  </div>

  <!--<div class="line"></div>-->


  <div class="col-sm-12 col-md-12 col-lg-12 cdt_bottom_card" (click)="eventChange(candidate.userDetails.infoDetails.userInfoMstr.userInfoMstrId)">


    <div class="col-sm-12 col-md-12 col-lg-12 padd_0 tests" *ngIf="role == '1'; else candidateDiv">

      <div  *ngFor="let course of candidate.courseDetails; let rowCount = index;">

        <div class="row">
        <div class=" col-lg-1"></div>
        <div class=" col-lg-1 courseCount">{{rowCount + 1}}</div>
          <div class="col-lg-10"> <h3 class="courseDtls">  {{course.pgCourseDetails.courseName}}</h3>
        </div>
        </div>
      </div>


    </div>

    <ng-template #candidateDiv>


        <div class="col-sm-12 col-md-12 col-lg-12 padd_0 tests" *ngIf="candidate.courseStatus == 'COURSE_COMPLETED'" >

          <app-event-progress [Events]="candidate.eventDetails[1]" [status]="candidate.courseStatus" eventName="primary"></app-event-progress>


        </div>

        <div class="col-sm-12 col-md-12 col-lg-12 padd_0 tests" *ngIf="candidate.courseStatus != 'COURSE_COMPLETED'" >

          <app-event-progress [Events]="candidate.eventDetails[1]" [status]="candidate.courseStatus" eventName="primary"></app-event-progress>
          <app-event-progress [Events]="candidate.eventDetails[2]" [status]="candidate.courseStatus" eventName="technical"></app-event-progress>
          <app-event-progress [Events]="candidate.eventDetails[3]" [status]="candidate.courseStatus" eventName="business"></app-event-progress>


        </div>

    </ng-template>





  </div>

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


    <div class="assignCandidateToCoach" *ngIf="candidate.userDetails.coachDetails.length == 0 ||candidate.courseStatus == 'COURSE_ASSIGNED' ; else coachDtls">

      <div class="assignHere cursorPointer" (click)="coachAssigned(candidate.userDetails.infoDetails.userInfoMstr.userInfoMstrId,candidate.courseId)">

                    <span >
                      <img src="{{imageUrl}}/assets/img/pgflow/coach_icon@2x.png"/>Assign Coach</span>

      </div>
    </div>
    <ng-template #coachDtls>

      <div class="assignCandidateToCoach">

        <div class="coachDetails">

          <h3 class="coach-assigned">Assigned Coach</h3>

          <h3 class="coach-name">{{candidate.userDetails.coachDetails[0].fullName}}</h3>

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

            {{ Intials(candidate.userDetails.coachDetails[0].fullName) }}

          </a>
        </div>

      </div>

    </ng-template>

  </div>
</div>

<!--<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#assignModal"></button>
&lt;!&ndash; Modal &ndash;&gt;
<div id="assignModal" class="modal fade skill-modal" role="dialog">
  <div class="modal-dialog admin-modal-dialog">

    &lt;!&ndash; Modal content&ndash;&gt;
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" id="" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Assign Coach</h4>
      </div>

      <div>
        <h3>Assign coach is UI works!</h3>
      </div>

    </div>

  </div>
</div>-->
