<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" *ngIf="CFLANDING">


    <div class="row">
      <div class="col-lg-6">
        <div class="employeeSearchIcon">
          <input type="search" [(ngModel)]="courseFilter.userDetails.infoDtls.fullName" placeholder="Search by Candidate Name" />
        </div>
      </div>
      <div class="col-lg-6">
        <div class="col-sm-10 col-md-4 col-lg-4 recommendCard" *ngIf="recommendedCol">
          <div class="row">
            <div class="recommendDiv1" (click)="selectedRecommend('Assessment')">
              <div class="row">
                <div class="col-lg-4">
                  <img src="{{imageUrl}}/assets/img/pgflow/Group_course.png">
                </div>
                <div class="col-lg-8">
                  <h2>
                    Assessment
                  </h2>
                </div>
              </div>
            </div>
            <div class="recommendDiv2 hide" (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 href="pgm/exportEmployee"><button class="btn btn-success">Reports</button></a>
        <button class="recommend-course hide" (click)="recommendCourse()">Recommend Course</button>-->
        </div>
      </div>
    </div>




    <h3>Recommended Course {{recommendCourseEmployee.length}}</h3>

    <mat-menu #primarymenu="matMenu">


    </mat-menu>

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


      <app-pgm-recommend-employee-card *ngFor="let candidate of recommendCourseEmployee" [candidate]="candidate" [role]="1" (candidateID)="goToCandidateDetails($event)"
        (scheduleId)="scheduleMettl($event)" (eventID)="goToEventDetails($event)"></app-pgm-recommend-employee-card>


    </app-slider>



    <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-employee-card *ngFor="let candidate of primarySkillEvalCandidates | filterBy: courseFilter" [candidate]="candidate"
        (candidateID)="goToEmployeeDetails($event)" (scheduleId)="scheduleMettl($event)" (approve)="updateCandidateStatus($event)"></app-coach-employee-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-employee-card *ngFor="let candidate of techUseCaseEvalCandidate | filterBy: courseFilter" [candidate]="candidate"
        (candidateID)="goToEmployeeDetails($event)"></app-coach-employee-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-employee-card *ngFor="let candidate of bussUseCaseEvalCandidate | filterBy: courseFilter" [candidate]="candidate"
        (candidateID)="goToEmployeeDetails($event)"></app-coach-employee-card>

    </app-slider>




  </section>

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