<section class="Section col-sm-12 col-md-12 col-lg-12" *ngIf="PGMEMPLANDING; 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>-->



  <div class="row">
    <div class="col-lg-6">
      <div class="employeeSearchIcon">
        <input type="search" [(ngModel)]="courseFilter.fullName" placeholder="Search by Employee 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.experienceLevel != null" class="check-btn">

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

                  <a *ngIf="level.userDetails.infoDetails.pgExperienceLevel.experienceLevel != null">{{level.userDetails.infoDetails.pgExperienceLevel.experienceLevel}}
                </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]="locationFilters.includes(_city)" name="checkgroup" (click)="searchCity(_city)">
                  </div>

                  <a *ngIf="_city != null">{{_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 jobTitles">
                  <div *ngIf="job.jobId != null" class="check-btn">

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

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


                </li>

              </ul>

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

      </div>
      <div class="col-sm-10 col-md-4 col-lg-4 recommendCard" *ngIf="recommendedCol">
        <div class="row">
          <div class="recommendDiv1" (click)="selectedRecommend('Course')">
            <div class="row">
              <div class="col-lg-4">
                <img src="{{imageUrl}}/assets/img/pgflow/Group_course.png">
              </div>
              <div class="col-lg-8">
                <h2>
                  Course
                </h2>
              </div>
            </div>
          </div>
          <div class="recommendDiv2" (click)="selectedRecommend('Assessment')">
            <div class="row">
              <div class="col-lg-4">
                <img src="{{imageUrl}}/assets/img/pgflow/Group3.png">
              </div>
              <div class="col-lg-8">
                <h2>
                  Assessment
                </h2>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="ButtonDiv">
        <button class="recommend-course" (click)="recommend()">Recommended <img src="{{imageUrl}}/assets/img/pgflow/add_button2.png"></button>
        <button class='activeFilter' (click)="filterCol=!filterCol">Filter</button>
        <a><button class="btn btn-success"  (click)="redirect()">Reports</button></a>
        <button class="recommend-course hide" (click)="recommendCourse()">Recommend Course</button>
      </div>
    </div>
  </div>


  <h3>Recommended Course </h3>
  <!--<h3 >Recommended Course <span>({{primarySkillCandidateCount}})</span>  </h3>-->

  <mat-menu #primarymenu="matMenu">

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

  </mat-menu>

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


    <app-pgm-recommend-employee-card *ngFor="let candidate of recommendCourseEmployee | filterBy: courseFilter" [candidate]="candidate"
      [role]="1" (candidateID)="goToCandidateDetails($event)" (assignCoach)="goToassignCoach($event)" (scheduleId)="scheduleMettl($event)"
      (eventID)="goToEventDetails($event)" (approve)="updateCandidateStatus('METTL_APPROVED',$event)" (reject)="updateCandidateStatus('METTL_REJECTED',$event)"></app-pgm-recommend-employee-card>


  </app-slider>



  <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-employee-card *ngFor="let candidate of primarySkillEvalCandidates | filterBy: courseFilter" [candidate]="candidate"
      [role]="0" (candidateID)="goToCandidateDetails($event)" (scheduleId)="scheduleMettl($event)" (approve)="updateCandidateStatus('METTL_APPROVED',$event)"
      (reject)="updateCandidateStatus('METTL_REJECTED',$event)"></app-pgm-employee-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-employee-card *ngFor="let candidate of techUseCaseEvalCandidate | filterBy: courseFilter" [candidate]="candidate"
      [role]="0" (candidateID)="goToCandidateDetails($event)"></app-pgm-employee-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-employee-card *ngFor="let candidate of bussUseCaseEvalCandidate | filterBy: courseFilter" [candidate]="candidate"
      [role]="0" (candidateID)="goToCandidateDetails($event)"></app-pgm-employee-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="{{imageUrl}}/assets/img/Blocks.gif">

</ng-template>


<button id="openSkillModal" [hidden]="true" data-toggle="modal" data-target="#skillModal"></button>
<!-- Modal -->
<div id="skillModal" class="modal fade skill-modal" role="dialog">
  <div class="modal-dialog admin-modal-dialog">

    <!-- Modal content-->
    <div class="modal-content contents">
      <div class="modal-header">
        <button type="button" id="closeModal" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Recommend {{isAssessment}}</h4>
      </div>

      <div>

        <select class="dropdowns" id="f" #skillMstr>
          <option selected="selected">Select</option>
          <option *ngFor="let _skill of Skills" [value]="_skill.skillTrackMstrId">{{ _skill.skillTrackName }}</option>
        </select>

      </div>
      <div class="">

        <div class="rectBox" (click)="skillSelect(skillMstr.value)">

          <img class="checkIcon" src="{{imageUrl}}/assets/img/pgflow/Check_icon.png">

        </div>

      </div>

    </div>




  </div>
</div>
