
<div class="">
  <div class="row">
    <div class="col-lg-12">
      <!--<label>
        Date Time Range:
        <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
               [selectMode]="'range'">
        <owl-date-time #dt10></owl-date-time>
      </label>-->
    </div>
  </div><br>
  <div class="row">
    <div class="col-lg-8">


    </div>
    <div class="col-lg-4">
      <button class="btn btn-primary" (click)="filterDtls = !filterDtls">Filter</button>
      <button class="btn btn-success" [disabled]="exportEnble" (click)="exports()">Export</button>

    </div>
  </div><br>
  <div class="row">
    <div class="col-lg-2">

    </div>
    <div class="col-lg-8">
      <div  class="candidateCard" *ngIf="filterDtls" >
        <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)="filterDtls = !filterDtls" >Clear All</a>
            </figure>

          </div>
          <mat-form-field class="example-full-width inputText">
            <input matInput placeholder="Candidate Name"  #cName>
          </mat-form-field>

          <br>
          <mat-select multiple=true class="example-full-width inputText" placeholder="Talent Acquisition"
                       name="primarySkill" #ta>
            <mat-option *ngFor="let ta of TA" [value]="ta.taId">
              {{ ta.taEmail }}
            </mat-option>
          </mat-select>

          <br>
          <mat-select multiple=true class="example-full-width inputText" placeholder="Primary Skill"
                       name="primarySkill" #skill>
            <mat-option *ngFor="let assessment of Skills" [value]="assessment.skillTrackMstrId">
              {{ assessment.skillTrackName }}
            </mat-option>
          </mat-select>

          <br>
          <mat-select multiple=true class="example-full-width inputText" placeholder="Location" #location>

            <mat-option *ngFor="let list of locations" [value]="list.locationId">
              {{ list.city }}
            </mat-option>

          </mat-select>

          <!-- <h2 class="labelCls">Data Range :</h2>

               <form #myForm="ngForm" novalidate>
                 <my-date-range-picker name="mydaterange" [options]="myDateRangePickerOptions"
                                       [(ngModel)]="model" (dateRangeChanged)="getDateFormat($event)" required></my-date-range-picker>
               </form>-->

          <!--<h2 class="labelCls">Data Range :</h2>-->

          <form #myForm="ngForm" class="datePickerForm" novalidate>
            <my-date-range-picker name="mydaterange" [options]="myDateRangePickerOptions"
                                  [(ngModel)]="model" (dateRangeChanged)="getDateFormat($event)" required></my-date-range-picker>
          </form>



          <div>
            <button class="btn btn-primary" (click)="filterItem(model,location.value,skill.value,ta.value,cName.value)">Filter</button>
          </div>

        </div>
      </div>
      <ng2-smart-table  [settings]="settings" [source]="data" mode = "external"></ng2-smart-table>

    </div>
    <div class="col-lg-2"></div>

  </div>

</div>
