<ng-container *ngIf="!settingIndividualKpi">
  <div class=" pt-1.5rem mb-2">
    <div class="flex flex-col gap-2">
      <div class="flex flex-col gap-2 w-full">
        <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px">
          <div class="box-body py-2">
            <div class="flex item-center w-full font-size-18px font-weight-700  text-primary px-5 mt-1 mb-4"
              style="height: 50px;align-items: center;border-width: 1px;background: #eff6fe; border-radius:20px">
              รายชื่อผู้ใต้บังคับบัญชา
            </div>
            <div class="flex w-full mb-4">
              <div class="flex w-1/4 justify-between">
                <!-- <div class="flex">
                  <div class="flex items-center">
                    <input type="checkbox" class="ti-form-checkbox pointer-events-none" id="hs-default-checkbox"
                      [checked]="selectEmp.size-1 > 0">
                    <label for="hs-default-checkbox" class="text-sm text-gray-500 mx-2 pointer-events-none">
                      {{selectEmp.size-1 < 0 ? 0 : selectEmp.size-1}} {{'Selected' | translate}} </label>
                  </div>
                  <div class="mx-1 flex items-center">
                    <button (click)="toggleSelectAll()"
                      class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
                      <i class="fs-l transition-all duration-200"
                        [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !selectEmp.get('selectAll'), 'ri-checkbox-multiple-fill text-primary': selectEmp.get('selectAll')}"></i>
                    </button>
                    <label (click)="toggleSelectAll()" class="text-sm text-gray-500 ml-2 cursor-pointer">
                      {{'SelectAll' |translate}}</label>
                  </div>
                </div> -->
              </div>
              <div class="flex w-3/4 justify-end">
                <div class="px-1">
                  <div class="relative shadow-md">
                    <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
                      [placeholder]="'SearchByNoOrName' | translate" [(ngModel)]="search"
                      (ngModelChange)="setSyncfutionDataList() ">
                    <div
                      class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
                      <i class="ri-search-line text-gray"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex flex-col w-100">
              <div class="mb-4">
                <ng-container *ngTemplateOutlet="Datagrid"></ng-container>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-container>
<ng-container *ngIf="settingIndividualKpi&&subordinate.select">
  <app-setting-individual-kpi [bossId]="bossId" [employeeId]="subordinate.select.apsassessy.employeeId"
    (sendReturnPath)="getEmpKpi();settingIndividualKpi=false"></app-setting-individual-kpi>
</ng-container>

<ng-template #Datagrid>
  <ejs-grid #grid id='Grid' [locale]="locale" [dataSource]="syncfution.dataList" [allowFiltering]="true"
    [filterSettings]="filterSettings" [selectionSettings]="selectionOptions"
    [searchSettings]="syncfution.searchSettings" [groupSettings]="groupSettings" [toolbar]="toolbarOptions"
    [editSettings]="editSettings" [loadingIndicator]='loadingIndicator' [query]="query"
    [columnMenuItems]="columnMenuItems" [pageSettings]="initialPage" [allowMultiSorting]="true" [allowPaging]="true"
    [allowGrouping]="true" [allowSorting]="true" [showColumnMenu]="true" [allowPdfExport]="true"
    [allowExcelExport]="true" [allowReordering]="true" width="auto" rowHeight="60" allowEditing="false"
    (columnMenuClick)="onColumnMenuClick($event)" (toolbarClick)='toolbarClick($event)'>
    <e-columns>
      <ng-container *ngFor="let col of syncfution.columns">
        <ng-container *ngIf="col.headerText">
          <e-column [field]="col.field" [headerText]="col.headerText" [width]="col.width" [format]="col.format"
            [isPrimaryKey]="col.isPrimaryKey" [validationRules]="col.validationRules" [visible]="col.visible"
            [editType]="false" [allowEditing]="false" [allowFiltering]="true" [allowSorting]="true" [type]="col.type"
            textAlign="center">
            <ng-template #headerTemplate let-data>
              <span class="font-size-12px font-weight-700 text-primary">{{ col.headerText |
                translate}}</span>
            </ng-template>
            <ng-template #template let-data *ngIf="col.headerText=='EmployeeCode'">
              <div class="flex-col gap-2">
                <!-- <input [disabled]="data.statusCode!='1'" [class.cursor-not-allowed]="data.statusCode!='1'"
                  [class.accent-gray-400]="data.statusCode!='1'" [class.opacity-50]="data.statusCode!='1'"
                  type="checkbox" class="ti-form-checkbox cursor-pointer" [checked]="selectEmp.get(data.employeeId)"
                  (click)="!selectEmp.get(data.employeeId)?selectEmp.set(data.employeeId , true):selectEmp.delete(data.employeeId);checkSelectAll()">
                &nbsp; -->
                <img class=" avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12"
                  [src]="data.picture?getImg(data.picture):'./assets/img/users/defaultperson.jpg'"
                  (error)="onImageError($event)">
                {{data.employeeId}}
              </div>
            </ng-template>
            <ng-template #template let-data *ngIf="col.headerText=='Status'">
              <div class="flex justify-center">
                <button type="button" class="ti-btn rounded-sm " [class]="statusButtonClass(data.statusEdesc)"
                  style="height: 30px; width: auto; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
                  (click)="selectSubordinate(data);">
                  {{data.status}}
                </button>
              </div>
            </ng-template>
          </e-column>
        </ng-container>
      </ng-container>
    </e-columns>
    <e-aggregates>
      <e-aggregate>
        <e-columns>
          <e-column *ngFor="let col of aggregatesSum" [field]="col.field" [type]="'Sum'"
            [footerTemplate]="'Sum: ${Sum}'" [groupFooterTemplate]="'Sum: ${Sum}'"
            [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
          </e-column>
        </e-columns>
      </e-aggregate>
      <e-aggregate>
        <e-columns>
          <e-column *ngFor="let col of aggregatesCount" [field]="col.field" [type]="'Count'"
            [footerTemplate]="'Count: ${Count}'" [groupFooterTemplate]="'Count: ${Count}'"
            [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
          </e-column>
        </e-columns>
      </e-aggregate>
      <e-aggregate>
        <e-columns>
          <e-column *ngFor="let col of aggregatesAvg" [field]="col.field" [type]="'Average'"
            [footerTemplate]="'Average: ${Average}'" [groupFooterTemplate]="'Average: ${Average}'"
            [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
          </e-column>
        </e-columns>
      </e-aggregate>
      <e-aggregate>
        <e-columns>
          <e-column *ngFor="let col of aggregatesMin" [field]="col.field" [type]="'Min'"
            [footerTemplate]="'Min: ${Min}'" [groupFooterTemplate]="'Min: ${Min}'"
            [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
          </e-column>
        </e-columns>
      </e-aggregate>
      <e-aggregate>
        <e-columns>
          <e-column *ngFor="let col of aggregatesMax" [field]="col.field" [type]="'Max'"
            [footerTemplate]="'Max: ${Max}'" [groupFooterTemplate]="'Max: ${Max}'"
            [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
          </e-column>
        </e-columns>
      </e-aggregate>
    </e-aggregates>
  </ejs-grid>
</ng-template>