<section class="pgm-landing col-sm-12 col-md-12 col-lg-12 hide">

    <!-- <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 class="col-sm-10 col-md-4 col-lg-4 candidateCard" *ngIf="filterCol">
          <div class="close-icon">
            <a (click)="closeFilter()">
              <img src="{{imageUrl}}/assets/img/employee/post_login/close-icon.png" alt="close">
            </a>
          </div>
          <div class="nav-side-menu">

            <div class="filter_title _block">

              <h4>FILTER</h4>
              <figure>
                <!-- <img class="filter_icon" (click)="resetFilters()" src="{{ta_img_path + 'refresh-simple-line-icons.png'}}" />-->
                <a class="clearAll" (click)="resetFilters()">Clear All</a>
              </figure>

            </div>


            <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
            <div class="menu-list">
              <ul id="menu-content" class="menu-content collapse out  ">

                <li data-toggle="collapse" data-target="#level" class="_block _border collapsed ">

                  <a> LEVEL
                    <span class="arrow"></span>
                  </a>


                </li>
                <ul class="sub-menu collapse" id="level">

                  <li *ngFor="let level of levels">

                    <div *ngIf="level != null" class="check-btn">

                      <input type="checkbox" [checked]="levelFilters.includes(level)" name="checkgroup" (click)="levelFilter(level)">
                    </div>

                    <a *ngIf="level != null">{{level}}
                    </a>
                  </li>


                </ul>


                <li data-toggle="collapse" data-target="#location" class="_block _border  collapsed hide ">
                  <a> LOCATION
                    <span class="arrow"></span>
                  </a>
                </li>
                <ul class="sub-menu collapse" id="location">
                  <li *ngFor="let _city of city">

                    <div *ngIf="_city != null" class="check-btn">

                      <input type="checkbox" [checked]="_city?.selectedCity" name="checkgroup" (click)="searchCity(_city.locationId, _city?.selectedCity)">
                    </div>

                    <a *ngIf="_city != null">{{_city.city}}
                    </a>


                  </li>

                </ul>


                <li data-toggle="collapse" data-target="#skill" class="_block _border collapsed ">
                  <a> SKILLS
                    <span class="arrow"></span>
                  </a>
                </li>
                <ul class="sub-menu collapse" id="skill">
                  <li *ngFor="let skill of skills">
                    <div *ngIf="skill != null" class="check-btn">

                      <input type="checkbox" [checked]="skillFilters.includes(skill)" name="checkgroup" (click)="skillFilter(skill)">
                    </div>

                    <a *ngIf="skill != null">{{skill}}
                    </a>

                  </li>

                </ul>


                <li data-toggle="collapse" data-target="#jtitle" class="_block _border collapsed ">
                  <a> JOB TITLE
                    <span class="arrow"></span>
                  </a>

                </li>
                <ul class="sub-menu collapse" id="jtitle">

                  <li *ngFor="let job of jobId">
                    <div *ngIf="job != null" class="check-btn">

                      <input type="checkbox" [checked]="jobFilters.includes(job)" name="checkgroup" (click)="jobTitleFilter(job)">
                    </div>

                    <a *ngIf="job != null">{{job}}
                    </a>


                  </li>

                </ul>

              </ul>
            </div>
          </div>

        </div>
        <div class="ButtonDiv">

          <button class='activeFilter' (click)="filterCol=!filterCol">Filter</button>
          <a>
            <button class="btn btn-success" (click)="redirect()">Report</button>
          </a>

        </div>
      </div>
      <div class="col-md-12" *ngIf="PGMCANTILANDING; else loader">
        <h3>Primary Skill Evaluation
          <span>({{(primarySkillEvalCandidates | filterBy:courseFilter).length}})
            <mat-icon [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-pgm-candidate-card *ngFor="let candidate of primarySkillEvalCandidates | filterBy: courseFilter" [candidate]="candidate"
            [role]="0" (candidateID)="goToCandidateDetails($event)" (eventID)="goToEventDetails($event)" (scheduleId)="scheduleMettl($event)"
            (approve)="updateCandidateStatus('METTL_APPROVED',$event)" (reject)="updateCandidateStatus('METTL_REJECTED',$event)"></app-pgm-candidate-card>


        </app-slider>

        <h3>Technical Use Case Evaluation
          <span>({{(techUseCaseEvalCandidate | filterBy:courseFilter).length}})
            <mat-icon [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-pgm-candidate-card *ngFor="let candidate of techUseCaseEvalCandidate | filterBy: courseFilter" [candidate]="candidate"
            [role]="0" (eventID)="goToEventDetails($event)" (candidateID)="goToCandidateDetails($event)"></app-pgm-candidate-card>


        </app-slider>

        <h3>Business Use Case Evaluation
          <span>({{(bussUseCaseEvalCandidate | filterBy:courseFilter).length}})
            <mat-icon [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-pgm-candidate-card *ngFor="let candidate of bussUseCaseEvalCandidate | filterBy: courseFilter" [candidate]="candidate"
            [role]="0" (eventID)="goToEventDetails($event)" (candidateID)="goToCandidateDetails($event)"></app-pgm-candidate-card>


        </app-slider>
      </div>
      <ng-template #loader>
        <div>
          <img class="loaderComp" src="{{imageUrl}}/assets/img/Blocks.gif">
        </div>
      </ng-template>
    </div>




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


<div class="new">
  <h2>New Candidate listing screen click this button</h2>
  <button class="newScreen" (click)="newList()"> NEW SCREEN </button>
</div>
