<ejs-grid #grid id='Grid' [locale]="locale" [dataSource]="dataSourceSearch" [allowFiltering]="allowFiltering"
  [filterSettings]="filterSettings" (actionComplete)="actionComplete($event)" [searchSettings]="searchSettings"
  [groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings" allowPaging='true'
  allowGrouping='true' allowSorting='true' [showColumnMenu]="true" (columnMenuClick)="onColumnMenuClick($event)"
  allowFiltering='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true'
  [selectionSettings]="selectionOptions" (detailDataBound)='detailDataBound($event)' width="auto" allowReordering='true'
  [loadingIndicator]='loadingIndicator' [query]="query" rowHeight='60' allowEditing='false' [pageSettings]='initialPage'
  [allowMultiSorting]='true' [columnMenuItems]="columnMenuItems">

  <e-columns>
    <e-column headerText='checkboxSelect' [textAlign]="'center'" width='160' [editType]="false" [allowEditing]="false"
      *ngIf="checkBoxSetting">
      <ng-template #headerTemplate let-data *ngIf="checkBoxSetting">
        <input type="checkbox" [id]="'checkbox-all'" class="ti-form-checkbox cursor-pointer"
          [checked]="selectedItemsAll" (click)="toggleSelectionAll()">
        <label [for]="'checkbox-all'" class="font-size-12px font-weight-700 text-primary">
          &nbsp;{{selectedItems.count}} {{'Selected' | translate}}</label>
      </ng-template>
      <ng-template #template let-data *ngIf="checkBoxSetting">
        <input type="checkbox" class="ti-form-checkbox cursor-pointer"
          [checked]="selectedItems.data.get(data[selectedItems.key]) || false"
          (click)="toggleSelection(data[selectedItems.key], !selectedItems.data.get(data[selectedItems.key]))">
        <ng-container *ngIf="showImg">
          &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)">
        </ng-container>
      </ng-template>
    </e-column>
    <ng-container *ngFor="let col of columns">
      <e-column *ngIf="col.headerText!=''" [field]="col.field" [headerText]="col.headerText" [width]="col.width"
        [format]="col.format" [textAlign]="'center'" [isPrimaryKey]="col.isPrimaryKey" [editType]="false"
        [validationRules]="col.validationRules" [allowEditing]="false" [allowSorting]="'true'" [allowFiltering]="true"
        [visible]="col.visible" [type]="col.type">
        <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.field == 'statusCode.tdesc'">
          <div class="flex justify-center items-center w-full h-full">
            <span
              class="hs-tooltip ti-main-tooltip [--trigger:hover] flex items-center justify-center rounded-full h-6 w-6 text-white"
              [ngClass]="{
                  'bg-success': data.statusCode.tdesc == 'กำลังดำเนินการประเมิน',
                  'bg-warning': data.statusCode.tdesc == 'รอดำเนินการ',
                  'bg-gray-400': data.statusCode.tdesc == 'สิ้นสุดช่วงเวลาประเมิน'
                }" role="tooltip">

              <ng-container [ngSwitch]="data.statusCode.tdesc">
                <i *ngSwitchCase="'กำลังดำเนินการประเมิน'"
                  class="ti ti-clock hs-tooltip-toggle ti-main-tooltip-toggle"></i>
                <i *ngSwitchCase="'รอดำเนินการ'"
                  class="ti ti-hourglass-empty hs-tooltip-toggle ti-main-tooltip-toggle"></i>
                <i *ngSwitchCase="'สิ้นสุดช่วงเวลาประเมิน'"
                  class="ti ti-check hs-tooltip-toggle ti-main-tooltip-toggle"></i>
              </ng-container>

              <span
                class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-primary text-white shadow-sm dark:bg-slate-700">
                {{ data.statusCode.tdesc }}
              </span>
            </span>
          </div>
        </ng-template>
      </e-column>
    </ng-container>

    <e-column headerText='action' [width]='actionWidth?actionWidth:205' textAlign='Center' *ngIf="actionSetting">
      <ng-template #headerTemplate let-data *ngIf="actionSetting">
        <span class="font-size-12px font-weight-700 text-primary">{{'Action' | translate}}</span>
      </ng-template>
      <ng-template #template let-data *ngIf="actionSetting">
        <i class="ti ti-eye cursor-pointer i-gray fs-l px-1" (click)="onNextPageView(data)" *ngIf="childView"></i>
        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" [attr.data-hs-overlay]="modalName" *ngIf="canEdit"
          (click)="onSelectData(data)"></i>
        <i class="ti ti-file-download cursor-pointer i-gray fs-l px-1" (click)="onFileDownload(data)"
          *ngIf="canDownload && data.competencyFiles"></i>
        <i class="ti ti-menu-2 cursor-pointer i-gray fs-l px-1" (click)="onNextPage(data)" *ngIf="canChild"></i>
        <i class="ti ti-user cursor-pointer i-gray fs-l px-1" (click)="onNextPageForm(data)" *ngIf="childForm"></i>
        <ng-container *ngIf="data.statusFrom as statusFrom">
          <ng-container [ngSwitch]="statusFrom.code">
            <span class="badge text-white m-1 cursor-pointer"
              (click)="modalStatus='createForm'; createFormEvent.emit(data)" *ngIf="statusFrom.code == '0'"
              [ngClass]="{'bg-secondary': true, 'text-white': true}">
              สร้างแบบฟอร์ม
            </span>
            <span class="badge text-white m-1" *ngIf="statusFrom.code == '1'"
              [ngClass]="{'bg-primary': true, 'text-white': true}">
              {{'EndPeriod' | translate}}
            </span>

            <span class="badge text-white m-1" *ngIf="statusFrom.code == '2'"
              [ngClass]="{'bg-gray-400': true, 'text-white': true}">
              {{'EndPeriod' | translate}}
            </span>
          </ng-container>
        </ng-container>
      </ng-template>
    </e-column>
  </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-aggregate>
      <e-columns>
        <e-column *ngFor="let col of aggregates" [field]="col.field" [type]="'Count'"
          [footerTemplate]="'Count: ${Count}'" [groupFooterTemplate]="col.groupFooterTemplate"
          [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
        </e-column>
      </e-columns>
    </e-aggregate> -->
  </e-aggregates>

</ejs-grid>