<ng-container *ngTemplateOutlet="evaluation"></ng-container>
<ng-template #evaluation>
  <div class=" pt-1.5rem">
    <div class="flex flex-col gap-2">
      <div class="flex flex-row gap-2">
        <div class="flex flex-col gap-2 w-1/4">
          <div class="w-full mb-2">
            <div class="font-size-18px font-weight-700  text-primary">
              <div class="absolute " style="transform:translateY(-9px)">
                <button type="button" *ngIf="evaluationForm=='sup'"
                  class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0 shadow-md hover:shadow-xl transition text-blue-500 bg-white"
                  (click)="returnPath()">
                  <i class="ti ti-chevron-left"></i>
                  ย้อนกลับ
                </button>
              </div>
              <span class="whitespace-nowrap relative" [ngStyle]="{'left':  evaluationForm=='sup' ? '105px':'0px'}">
                แก้ไข Individual KPI {{evaluationForm=='sup'?'โดยหัวหน้า':'ตัวเอง'}}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-row gap-2">
        <div class="flex flex-col gap-2 w-1/4" [class.hidden]="menuClose.get('ข้อมูลรายละเอียด')">
          <div class="flex flex-col gap-2" style="height:calc(100vh - 177px);overflow-y: auto;">
            <div class="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 flex-col items-center gap-3">
                    <img
                      [src]="evaluatee.data.picture?getImg(evaluatee.data.picture):'./assets/img/users/defaultperson.jpg'"
                      (error)="onImageError($event)" class="h-24 w-24 rounded-full ring-4 ring-primary object-cover"
                      alt="profile-img" />
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full">
              <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px">
                <div class="box-header" [class.border-none]="menuClose.get('ข้อมูลพนักงาน')">
                  <div class="flex justify-between">
                    <h5 class="box-title align-center">ข้อมูลพนักงาน</h5>
                    <i *ngIf="menuClose.get('ข้อมูลพนักงาน')" title="แสดง"
                      class="bg-white cursor-pointer border ti ti-chevron-down"
                      style="padding: 1px;border-radius:10px;font-size:27px"
                      (click)="menuClose.set('ข้อมูลพนักงาน',false)"></i>
                    <i *ngIf="!menuClose.get('ข้อมูลพนักงาน')" title="ปิด"
                      class="bg-white cursor-pointer border ti ti-chevron-up"
                      style="padding: 1px;border-radius:10px;font-size:27px"
                      (click)="menuClose.set('ข้อมูลพนักงาน',true)"></i>
                  </div>
                </div>
                <div class="box-body py-2" [class.hidden]="menuClose.get('ข้อมูลพนักงาน')">
                  <table class="ti-custom-table border-0 ellipsis-text">
                    <tbody>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">รหัสพนักงาน
                        </td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{evaluatee.data.employeeId}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">ชื่อ - สกุล
                        </td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{evaluatee.data.thFullName}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">ตำเเหน่ง</td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{evaluatee.data.position.tdesc}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">ฝ่าย</td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{evaluatee.data.bu1.tdesc}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">แผนก</td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{evaluatee.data.bu2.tdesc}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">ระดับ</td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{evaluatee.data.pl.tdesc}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">E-mail</td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{evaluatee.data.email}}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex flex-col  gap-2"
          [ngClass]="{ 'w-3/4': !menuClose.get('ข้อมูลรายละเอียด'), 'w-full':menuClose.get('ข้อมูลรายละเอียด')}">
          <div class="w-full relative">
            <div class="absolute h-full hover-visible" style="z-index: 1;transform: translateX(-15%);">
              <div [title]="menuClose.get('ข้อมูลรายละเอียด')?'แสดงข้อมูลรายละเอียด':'ปิดข้อมูลรายละเอียด'"
                (click)="menuClose.get('ข้อมูลรายละเอียด')?menuClose.set('ข้อมูลรายละเอียด',false):menuClose.set('ข้อมูลรายละเอียด',true)"
                class="cursor-pointer hover-show h-full border"
                style="border-right:0 ;align-content:center;background: linear-gradient(to right, rgb(237, 237, 237), rgb(245 , 245 , 245 ),rgb(255, 255, 255 , 0));border-radius:20px 0 0 20px">
                <i *ngIf="menuClose.get('ข้อมูลรายละเอียด')" class="cursor-pointer ti ti-chevron-right "
                  style="padding: 1px;font-size:27px;height:33px" (click)="menuClose.set('ข้อมูลรายละเอียด',true)"></i>
                <i *ngIf="!menuClose.get('ข้อมูลรายละเอียด')" class="cursor-pointer ti ti-chevron-left "
                  style="padding: 1px;font-size:27px;height:33px" (click)="menuClose.set('ข้อมูลรายละเอียด',false)"></i>
              </div>
            </div>
            <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px;">
              <div class="box-header" style="border:0">
              </div>
              <div #scrollContainer class="box-body pt-0" style="overflow-y: auto; height: calc(100vh - 253px)">
                <div class="min-height: calc(100vh - 406px);">
                  <ng-container *ngTemplateOutlet="pmsEvaluation"></ng-container>
                </div>
                <div class="box-footer text-end space-x-3 rtl:space-x-reverse"
                  style="margin: 0.5rem -24px -24px -24px;">
                  <button class="ti-btn m-0 ti-btn-soft-secondary">
                    <i class="ri-save-3-fill"></i>
                    ยืนยันข้อมูล
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>


<ng-template #pmsEvaluation>
  <div class="flex flex-col">
    <div class="flex flex-col gap-2" style="min-height: calc(100vh - 479px);">
      <div class=" flex flex-col gap-2" [attr.id]="'menu-part-3'">
        <button type="button"
          class="p-4 w-full bg-gradient-to-r from-primary to-secondary text-white text-left font-semibold"
          style="border-radius:20px">
          ประเมินผลการปฏิบัติงานประจำ&nbsp;(Individual KPI)
        </button>
        <div class="relative">
          <table style="table-layout: fixed; width: 100%;">
            <thead class="border-b border-gray-200">
              <tr style="height:35px">
                <th scope="col">ตัวชี้วัด</th>
                <th scope="col">น้ำหนัก</th>
                <th scope="col">เป้าหมาย</th>
                <th scope="col">หน่วยนับ</th>
                <th scope="col">กำหนดเสร็จ</th>
                <th scope="col">เพิ่มเติม</th>
              </tr>
            </thead>
            <tbody>
              <ng-container *ngFor="let item of individualKPI.list;let i = index">
                <tr class="border-b border-gray-200"
                  (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.indicatorsDetail,true)"
                  (mouseleave)="tableHover.clear()"
                  [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.indicatorsDetail)?'#f1f5f9':'#ffffff'}">
                  <td class="py-2" style="vertical-align: top">
                    {{item.groupAssessment1.pmsTopic.indicatorsDetail}}</td>
                  <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
                  <td class="py-2 text-center" style="vertical-align: top">
                    {{item.groupAssessment1.pmsTopic.performanceGoalsDetail}}
                  </td>
                  <td class="py-2 text-center" style="vertical-align: top">
                    {{item.groupAssessment1.pmsTopic.detailUnit}}
                  </td>
                  <td class="py-2 text-center" style="vertical-align: top">
                    {{item.groupAssessment1.pmsTopic.completionDate}}
                  </td>
                  <td class="py-2 text-center" style="vertical-align: top">
                    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                      <div class="hs-tooltip-toggle ti-main-tooltip-toggle">
                        <i class="ti ti-help-circle"></i>
                        <div class="hs-tooltip-content ti-main-tooltip-content border-secondary" role="tooltip">
                          <div class="flex flex-col gap-2 font-weight-700">
                            <div>รายละเอียดข้อมูล</div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                ที่มาของนโยบาย
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">
                                {{item.groupAssessment1.pmsTopic.tdesc}}
                              </div>
                            </div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                ตัวชี้วัด
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">
                                {{item.groupAssessment1.pmsTopic.indicatorsDetail}}
                              </div>
                            </div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                เป้าหมาย
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">
                                {{item.groupAssessment1.pmsTopic.performanceGoalsDetail}}
                              </div>
                            </div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                หน่วยนับ
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">
                                {{item.groupAssessment1.pmsTopic.detailUnit}}
                              </div>
                            </div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                กำหนดเสร็จ
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">
                                {{item.groupAssessment1.pmsTopic.completionDate}}
                              </div>
                            </div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                น้ำหนัก
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">
                                {{item.weight}}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              </ng-container>
              <tr>
                <td class="py-2 text-center">
                  <input type="text" id="input-label" class="ti-form-input">
                </td>
                <td class="py-2 text-center">
                  <input type="text" id="input-label" class="ti-form-input">
                </td>
                <td class="py-2 text-center">
                  <input type="text" id="input-label" class="ti-form-input">
                </td>
                <td class="py-2 text-center">
                  <input type="text" id="input-label" class="ti-form-input">
                </td>
                <td class="py-2 text-center">
                  <input type="text" id="input-label" class="ti-form-input">
                </td>
                <td class="py-2 text-center" style="justify-items:center">
                  <ng-container *ngIf="true">
                    <button type="button" class="flex text-start items-center cursor-default">
                      <i class="ti ti-circle-plus text-green-500 cursor-pointer" style="font-size: 20px;"
                        (click)="assessmentDialogOpen()"></i>
                    </button>
                  </ng-container>
                  <ng-container *ngIf="false">
                    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                      <div class="hs-tooltip-toggle ti-main-tooltip-toggle">
                        <i class="ti ti-help-circle"></i>
                        <div class="hs-tooltip-content ti-main-tooltip-content border-secondary" role="tooltip">
                          <div class="flex flex-col gap-2 font-weight-700">
                            <div>รายละเอียดข้อมูล</div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                ที่มาของนโยบาย
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">
                              </div>
                            </div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                ตัวชี้วัด
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">

                              </div>
                            </div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                เป้าหมาย
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">

                              </div>
                            </div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                หน่วยนับ
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">

                              </div>
                            </div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                กำหนดเสร็จ
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">

                              </div>
                            </div>
                            <div class="text-start flex flex-row">
                              <div style="width: 100px;">
                                น้ำหนัก
                              </div>
                              <div class="px-1">
                                &nbsp;:&nbsp;
                              </div>
                              <div class="flex-1">

                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </ng-container>
                </td>
              </tr>
              <tr>
                <td class="py-2 text-center" style="vertical-align: center;justify-items:center" colspan="6">
                  <button type="button" class="flex text-start items-center cursor-default"
                    (click)="competencyTopicDialogOpen()">
                    <i class="ti ti-circle-plus text-green-500 cursor-pointer" style="font-size: 20px;"></i>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</ng-template>


<ng-template #assessmentDialog let-modal>
  <h3 mat-dialog-title>
    รายการประเมิน
  </h3>
  <mat-dialog-content>
    <div class="flex justify-end pb-1rem">
      <div class="px-1">
        <div class="relative shadow-md">
          <input type="text" id="hs-leading-icon" name="hs-leading-icon"
            class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " [placeholder]="'SearchByNoOrName' | translate"
            [(ngModel)]="modalData.search">
          <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 class="overflow-auto border">
      <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
        <thead>
          <tr>
            <ng-container
              *ngFor="let item of ['รหัส','ชื่อหัวข้อ','ประเภท','น้ำหนัก','การจัดการ']; let f = first; let l = last; let i = index">
              <th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
                <span class="font-size-12px font-weight-700">{{ item }}</span>
                <div class="absolute top-1/2 transform -translate-y-1/2 right-0">
                  <i class="ti ti-dots-vertical fs-l"></i>
                </div>
              </th>
            </ng-container>
          </tr>
        </thead>
        <tbody *ngIf="pmstopic.loading">
          <tr>
            <td class="text-center" colspan="100%">
              <div *ngFor="let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
                aria-label="loading">
                <span class="sr-only">Loading...</span>
              </div>
            </td>
          </tr>
        </tbody>
        <tbody *ngIf="!pmstopic.loading&&!pmstopicListFilter().length">
          <tr>
            <td class="text-center" colspan="100%">
              ไม่พบข้อมูล
            </td>
          </tr>
        </tbody>
        <tbody *ngIf="!pmstopic.loading&&pmstopicListFilter().length">
          <tr
            *ngFor="let item of pmstopicListFilter() | slice:((modalData.currentPage-1) * 10) : (((modalData.currentPage-1) * 10) + 10);let i = index">
            <td class="text-center">
              {{item.data.pmsTopicId}}
            </td>
            <td>{{item.data.tdesc}}</td>
            <td>{{item.data.pmsType.tdesc}}</td>
            <td>{{item.data.weight}}</td>
            <td class="text-center"> <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
                data-hs-overlay="#assessment-table-modal" (click)="selectPmstopic(item.data)">
                <i class="ri-add-line"></i>
                Select
              </button></td>
          </tr>
        </tbody>
      </table>
    </div>
    <app-pagination [totalItems]="pmstopicListFilter().length" [pageSize]="modalData.pageSize"
      (pageChange)="modalData.currentPage = $event"
      (pageSizeChange)="modalData.pageSize = $event;modalData.currentPage = 1"></app-pagination>
  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button type="button" mat-button [mat-dialog-close] (click)="assessmentDialogClose()"
      class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
      ย้อนกลับ
    </button>
  </mat-dialog-actions>
</ng-template>

<ng-template #competencyTopicDialog let-modal>
  <h3 mat-dialog-title>
    เพิ่ม Individual KPI
  </h3>
  <div class="w-full flex justify-end mb-1rem">
    <div class="absolute flex">
      <div class="px-1">
        <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
          <i class="ti ti-eraser text-base"></i>
          Clear
        </button>
      </div>
    </div>
  </div>
  <mat-dialog-content>
    <label for="detail_th" class="ti-form-label mt-2rem">ชื่อหัวข้อ (ไทย)<span class="text-danger">*</span></label>
    <input type="text" id="detail_th" class="ti-form-input h-10" [(ngModel)]="competencyTopic.select.tdesc">
    <label for="detail_eng" class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
    <input type="text" id="detail_eng" class="ti-form-input h-10" [(ngModel)]="competencyTopic.select.edesc">
    <label for="detail_eng" class="ti-form-label mt-2rem">นิยามสมรรถนะ</label>
    <textarea type="text" id="detail_eng" class="ti-form-input" rows="4" cols="50"
      [(ngModel)]="competencyTopic.select.competencyDetail"> </textarea>
    <label class="ti-form-label mt-2rem">ประเภท Competency<span class="text-danger">*</span></label>
    <div class="flex">
      <div class="relative flex rounded-md w-1/2">
        <input type="text" id="hs-leading-button-add-on-with-icon-and-button"
          name="hs-leading-button-add-on-with-icon-and-button"
          class="ti-form-input rounded-md ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 2.5rem;"
          readonly [(ngModel)]="competencyTopic.select.competencyType.shortName">
        <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4 space-x-2">
          <button type="button" class="flex items-center text-red-500" (click)="selectCompetencytype()">
            <i class="ti ti-circle-x cursor-pointer"></i>
          </button>
          <button type="button" class="flex items-center text-gray-500 dark:text-white/70"
            (click)="competencyTypeDialogOpen()">
            <i class="ri-search-line cursor-pointer text-gray"></i>
          </button>
        </div>
      </div>
    </div>
    <label class="ti-form-label mt-2rem">แนบไฟล์ข้อสอบ</label>
    <div class="flex rounded-md">
      <label class="sr-only">อัปโหลดไฟล์</label>
      <input #fileInputMedium id="fileInputMedium" type="file" (change)="onExamSelected($event)" hidden>
      <input type="text" [value]="examFileName" readonly onclick="fileInputMedium.click();"
        class=" cursor-pointer block w-full border border-gray-200 focus:shadow-sm dark:focus:shadow-white/10 ltr:rounded-l-md rtl:rounded-r-none text-sm focus:z-10 focus:outline-0 focus:border-gray-200 dark:focus:border-white/10 dark:border-white/10 dark:text-white/70 file:border-0 file:bg-gray-100 ltr:file:mr-4 rtl:file:ml-4 file:py-3 file:px-4 dark:file:bg-black/20 dark:file:text-white/70">
      <span
        class="px-4 inline-flex items-center min-w-fit ltr:rounded-r-md rtl:rounded-l-none border ltr:border-l-0 rtl:border-r-0 border-gray-200 bg-gray-50 text-sm dark:bg-black/20 dark:border-white/10">
        <button class="text-sm text-gray-500 dark:text-white/70" onclick="fileInputMedium.click();">Browse</button>
      </span>
      <div class="flex items-center ml-2">
        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-10px m-0 shadow-md rounded-md"
          (click)="fileInputMedium.value = '';examFile=null;examFileName = 'กรุณาเลือกไฟล์'">
          <i class="ri-delete-bin-6-line"></i>
          Delete
        </button>
      </div>
    </div>
    <div class="flex" *ngIf="examFileName==competencyTopic.select.competencyFiles">
      <h1 class="cursor-pointer justify-center -mb-px inline-flex items-center gap-2 font-weight-500 font-size-12px
            text-center text-secondary border-secondary border-b-2 align-items-end"
        (click)="downloadExam(examFileName)">
        ดาวน์โหลดไฟล์ข้อสอบ</h1>
    </div>
  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button type="button" mat-button [mat-dialog-close]
      class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
      ย้อนกลับ
    </button>
    <button type="button" class="ti-btn ti-btn-success" mat-button (click)="confirmCompetencyTopic()"
      [class.ti-btn-disabled]="!competencyTopic.select.competencyType.competencyTypeId||!competencyTopic.select.tdesc||!competencyTopic.select.competencyType.shortName"
      [disabled]="!competencyTopic.select.competencyType.competencyTypeId||!competencyTopic.select.tdesc||!competencyTopic.select.competencyType.shortName">
      บันทึกข้อมูล
    </button>
  </mat-dialog-actions>
</ng-template>

<ng-template #competencyTypeDialog let-modal>
  <h3 mat-dialog-title>
    ประเภทสมรรถนะ
  </h3>
  <mat-dialog-content>
    <div class="flex justify-end pb-1rem">
      <div class="px-1">
        <div class="relative shadow-md">
          <input type="text" id="hs-leading-icon" name="hs-leading-icon"
            class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " [placeholder]="'SearchByNoOrName' | translate"
            [(ngModel)]="modalData.search">
          <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 class="overflow-auto border">
      <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
        <thead>
          <tr>
            <ng-container *ngFor="let item of ['รหัส','ชื่อประเภท','ชื่อย่อ','การจัดการ']; let f = first; let l = last">
              <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                <span class="text-sm">{{ item }}</span>
                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
                  <i class="ti ti-dots-vertical fs-l"></i>
                </div>
              </th>
            </ng-container>
          </tr>
        </thead>
        <tbody *ngIf="!competencytypeListFilter().length">
          <tr>
            <td class="text-center" colspan="100%">
              ไม่พบข้อมูล
            </td>
          </tr>
        </tbody>
        <tbody *ngIf="competencytypeListFilter().length">
          <tr
            *ngFor="let item of competencytypeListFilter()| slice:((modalData.currentPage-1) * 10) : (((modalData.currentPage-1) * 10) + 10);let i = index">
            <td>{{item.competencyTypeId}}</td>
            <td>{{item.tdesc}}</td>
            <td>{{item.shortName}}</td>
            <td class="flex justify-center">
              <div class="px-1">
                <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md"
                  (click)="selectCompetencytype(item)">
                  <i class="ri-add-line"></i>
                  Select
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <app-pagination [totalItems]="competencytypeListFilter().length" [pageSize]="modalData.pageSize"
      (pageChange)="modalData.currentPage = $event"
      (pageSizeChange)="modalData.pageSize = $event;modalData.currentPage = 1"></app-pagination>
  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button type="button" mat-button [mat-dialog-close]
      class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
      ย้อนกลับ
    </button>
  </mat-dialog-actions>
</ng-template>