<div *ngIf="loader; else showSection">
  <img src="{{img_path + 'Blocks.gif'}}" width="15%">
</div>
<ng-template #showSection>
  <section class="Section col-sm-12 col-md-12 col-lg-12">

    <!-- <div class="section_banner">




       <div class="status_list pull-right">

         <ul>
           <li [class.active]="filterActive == 'all'"> <a (click)="All()">All</a>  </li>

           <li [class.active]="filterActive == 'new'"> <a (click)="New()">New</a>  </li>

           <li [class.active]="filterActive == 'inProgress'"> <a (click)="inProgress()">In Progress</a>  </li>

           <li [class.active]="filterActive == 'coachEvaluation'"> <a (click)="coachEvaluation()">Coach Evaluation</a>  </li>

           <li [class.active]="filterActive == 'completed'"> <a (click)="completedTestnEvaluation()">Completed</a>  </li>

         </ul>

       </div>

     </div>-->

    <div class="row">
      <div class="col-lg-6">
        <div class="employeeSearchIcon">
          <input type="search" [(ngModel)]="courseFilter.infoDetails.fullName" placeholder="Search by Candidate Name" />
        </div>
      </div>
      <div class="col-lg-6">

      </div>
    </div>




    <h3>Primary Skill Evaluation <span>({{(primarySkillEvalCandidates | filterBy:courseFilter).length}})<mat-icon class="cursorPointer" [matMenuTriggerFor]="primarymenu">more_horiz</mat-icon> </span>      </h3>

    <mat-menu #primarymenu="matMenu">

      <app-filtermodal [filters]="primaryFilter" (filterId)="filterPrimary($event)"> </app-filtermodal>

    </mat-menu>

    <app-slider [valueStep]='400'>


      <app-coach-candidate-card *ngFor="let candidate of primarySkillEvalCandidates | filterBy: courseFilter" [candidate]="candidate"
        (candidateID)="goToCandidateDetails($event)" (scheduleId)="scheduleMettl($event)" (approve)="updateCandidateStatus('METTL_APPROVED',$event)"
        (reject)="updateCandidateStatus('METTL_REJECTED',$event)"></app-coach-candidate-card>


    </app-slider>



    <h3>Technical Use Case Evaluation <span>({{(techUseCaseEvalCandidate | filterBy:courseFilter).length}}) <mat-icon class="cursorPointer" [matMenuTriggerFor]="technicalmenu">more_horiz</mat-icon></span></h3>

    <mat-menu #technicalmenu="matMenu">

      <app-filtermodal [filters]="filter" (filterId)="filterTechnical($event)"> </app-filtermodal>

    </mat-menu>

    <app-slider [valueStep]='400'>


      <app-coach-candidate-card *ngFor="let candidate of techUseCaseEvalCandidate | filterBy: courseFilter" [candidate]="candidate"
        (candidateID)="goToCandidateDetails($event)"></app-coach-candidate-card>


    </app-slider>

    <h3>Business Use Case Evaluation <span>({{(bussUseCaseEvalCandidate | filterBy:courseFilter).length}}) <mat-icon class="cursorPointer" [matMenuTriggerFor]="businessmenu">more_horiz</mat-icon></span>      </h3>

    <mat-menu #businessmenu="matMenu">

      <app-filtermodal [filters]="filter" (filterId)="filterBusiness($event)"> </app-filtermodal>

    </mat-menu>

    <app-slider [valueStep]='400'>


      <app-coach-candidate-card *ngFor="let candidate of bussUseCaseEvalCandidate | filterBy: courseFilter" [candidate]="candidate"
        (candidateID)="goToCandidateDetails($event)"></app-coach-candidate-card>


    </app-slider>

    <!--<div   *ngFor="let candidate of registeredCandidates"   >

       <div  class="col-sm-10 col-md-4 col-lg-4 candidateCard"  (click)="goToCandidateDetails(candidate.infoDetails.userInfoMstr.userInfoMstrId)">



         <div class="cdt_top_card">

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

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


         </div>

         &lt;!&ndash;<div class="line"></div>&ndash;&gt;


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

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

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


           </div>






         </div>
       </div>


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