<section class="Section col-sm-12 col-md-12 col-lg-12" *ngIf="PGMCOACHLANDING; else loader">

    <!-- <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>-->

    <!--<h3 >  Coach Details <span>({{primarySkillCandidateCount}})<mat-icon [matMenuTriggerFor]="primarymenu">more_horiz</mat-icon> </span>  </h3>-->


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

                <!-- <button class='activeFilter'>Filter</button> -->
            </div>
        </div>
    </div>


    <h3>New Coaches <span>({{(allInactiveCoach | filterBy:courseFilter).length}}) </span> </h3>


    <app-slider [valueStep]='400'>
        <app-pgm-coach-card *ngFor="let Incoach of allInactiveCoach | filterBy: courseFilter" [coach]="Incoach" [status]=true (coachID)="goToCoachDetails($event)" (scheduleId)="scheduleMettl($event)" (approve)="updateCandidateStatus($event)" (reject)="updateCandidateStatus($event)"></app-pgm-coach-card>

    </app-slider>

    <h3>Approved Coaches <span>({{(allCoach | filterBy:courseFilter).length}}) </span> </h3>


    <app-slider [valueStep]='400'>
        <app-pgm-coach-card *ngFor="let coach of allCoach | filterBy: courseFilter" [coach]="coach" [status]=false (coachID)="goToCoachDetails($event)" (scheduleId)="scheduleMettl($event)" (approve)="updateCandidateStatus($event)" (reject)="updateCandidateStatus($event)"></app-pgm-coach-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 #loader>

    <img class="loaderComp" src="{{img_path_1}}+Blocks.gif">

</ng-template>