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



  <div class="cdt_top_card"  (click)="Selected(candidate.infoDetails.userInfoMstrId)">

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

    <app-skills [skills]="candidate.infoDetails.pgUserSkillDtlsName"></app-skills>


  </div>

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


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


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

      <h3 class="courseDtls" *ngFor="let course of candidate.infoDetails.pgCourseDtls; let rowCount = index;">

        {{rowCount}} . {{course.pgCourseDetails.courseName}}

      </h3>


    </div>

    <ng-template #candidateDiv>

    <div *ngIf="candidate.infoDetails.status =='METTL_COACH_ASSIGNED'; else Coachevents" class="col-sm-12 col-md-12 col-lg-12 padd_0 tests" >

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

    </div>
      <ng-template #Coachevents>
      <div *ngIf="candidate.infoDetails.status =='TA_APPROVED'; else events" class="col-sm-12 col-md-12 col-lg-12 padd_0 tests" >

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

    </div>

    <ng-template #events>


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

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


      </div>
    </ng-template>
    </ng-template>
    </ng-template>





  </div>

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





    <div *ngIf="candidate.infoDetails.status == 'TA_APPROVED' ||
      candidate.infoDetails.status == 'METTL_REVIEW' ||
      candidate.infoDetails.status == 'METTL_COACH_ASSIGNED' ||
      candidate.infoDetails.status == 'METTL_SCHEDULED' ||
    candidate.infoDetails.status == 'METTL_REJECTED' ">

      <div class="assignCandidateToCoach" *ngIf="candidate?.coachDetails?.length === 0 && candidate?.infoDetails.status == 'TA_APPROVED' ; else coachDtls">

        <div  class="assignHere cursorPointer" (click)="coachAssign(candidate?.infoDetails?.userInfoMstrId)">

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

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

        <div class="assignCandidateToCoach" *ngIf="candidate?.coachDetails?.length == 1">

          <div class="coachDetails">

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

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

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

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

            </a>
          </div>

        </div>

      </ng-template>

    </div>

    <div *ngIf="candidate.infoDetails.status == 'METTL_APPROVED' ||
                candidate.infoDetails.status == 'COACH_ASSIGNED' ||
                candidate.infoDetails.status == 'MINI_PG_STARTED' ||
                candidate.infoDetails.status == 'MINI_PG_COMPLETED' ||
                candidate.infoDetails.status == 'MINI_PG_COACH_REJECTED'">

      <div class="assignCandidateToCoach" *ngIf="candidate?.coachDetails?.length == 1 && candidate?.infoDetails?.status == 'METTL_APPROVED' ; else coachDtls">

        <div  class="assignHere cursorPointer" (click)="coachAssign(candidate.infoDetails.userInfoMstrId)">

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

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

        <div class="assignCandidateToCoach" *ngIf="candidate?.coachDetails?.length == 2">

          <div class="coachDetails">

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

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

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

              {{ Intials(candidate.coachDetails[1].fullName) }}

            </a>
          </div>

        </div>

      </ng-template>

    </div>

    <div *ngIf="candidate.infoDetails.status == 'MINI_PG_COACH_APPROVED' ||
                candidate.infoDetails.status == 'MAIN_PG_COACH_ASSIGNED' ||
                candidate.infoDetails.status == 'MAIN_PG_COMPLETED' ||
                candidate.infoDetails.status == 'MAIN_PG_COACH_REVIEWED' ||
                candidate.infoDetails.status == 'MAIN_PG_MANAGER_APPROVED' ||
                candidate.infoDetails.status == 'MAIN_PG_MANAGER_REJECTED'">

      <div class="assignCandidateToCoach" *ngIf="candidate.coachDetails.length == 2 && candidate.infoDetails.status == 'MINI_PG_COACH_APPROVED' ; else coachDtls">

        <div  class="assignHere cursorPointer" (click)="coachAssign(candidate.infoDetails.userInfoMstrId)">

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

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

        <div class="assignCandidateToCoach" *ngIf="candidate.coachDetails.length == 3">

          <div class="coachDetails">

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

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

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

              {{ Intials(candidate.coachDetails[2].fullName) }}

            </a>
          </div>

        </div>

      </ng-template>

    </div>


   <!-- <div *ngIf="candidate.infoDetails.status == 'TA_APPROVED' ||
      candidate.infoDetails.status == 'METTL_REVIEW' ||
      candidate.infoDetails.status == 'METTL_COACH_ASSIGNED' ||
    candidate.infoDetails.status == 'METTL_REJECTED' ">
    <div class="assignCandidateToCoach" *ngIf="candidate.coachDetails.length == 0  || candidate.infoDetails.status == 'TA_APPROVED' ; else coachDtls">

      <div  class="assignHere cursorPointer" (click)="coachAssign(candidate.infoDetails.userInfoMstrId)">

                    <span >
                      <img src="../../../../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.coachDetails[0].fullName}}</h3>

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

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

          </a>
        </div>

      </div>

    </ng-template>
    </div>

    <div *ngIf="candidate.infoDetails.status == 'METTL_APPROVED' ||
                candidate.infoDetails.status == 'COACH_ASSIGNED' ||
                candidate.infoDetails.status == 'MINI_PG_STARTED' ||
                candidate.infoDetails.status == 'MINI_PG_COMPLETED' ||
                candidate.infoDetails.status == 'MINI_PG_COACH_REJECTED'
">
    <div class="assignCandidateToCoach" *ngIf="candidate.coachDetails.length == 1 || candidate.infoDetails.status == 'METTL_APPROVED'; else coachTechDtls">

      <div class="assignHere cursorPointer" (click)="coachAssign()">

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

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

      <div class="assignCandidateToCoach">

        <div class="coachDetails">

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

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

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

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

          </a>
        </div>

      </div>

    </ng-template>
    </div>

    <div *ngIf="candidate.infoDetails.status == 'MINI_PG_COACH_APPROVED' ||
                candidate.infoDetails.status == 'MAIN_PG_COACH_ASSIGNED' ||
                candidate.infoDetails.status == 'MAIN_PG_COMPLETED' ||
                candidate.infoDetails.status == 'MAIN_PG_COACH_REVIEWED' ||
                candidate.infoDetails.status == 'MAIN_PG_MANAGER_APPROVED' ||
                candidate.infoDetails.status == 'MAIN_PG_MANAGER_REJECTED'
">
    <div class="assignCandidateToCoach" *ngIf="candidate.coachDetails.length == 2 || candidate.infoDetails.status == 'MINI_PG_COACH_APPROVED'; else coachBussDtls">

      <div class="assignHere cursorPointer" (click)="coachAssign()">

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

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

      <div class="assignCandidateToCoach">

        <div class="coachDetails">

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

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

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

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

          </a>
        </div>

      </div>

    </ng-template>
    </div>-->
  </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">
        <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>
