<ng-container *ngTemplateOutlet="newDesige"></ng-container>
<ng-template #newDesige>
  <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="bossId"
                  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':  bossId ? '105px':'0px'}">
                แก้ไข Individual KPI {{bossId?'โดยหัวหน้า':'ตัวเอง'}}
              </span>
            </div>
          </div>
        </div>
        <div class="flex flex-col w-3/4 gap-2">
          <div class="w-full mb-2 flex">
            <div class="w-full flex flex-row gap-2">
              <ng-container *ngFor="let item of appraisalKpiSettingEmp.list; let i=index ; let f= first">
                <div class="font-size-18px font-weight-700">
                  <span class="cursor-pointer"
                    [ngClass]="{'text-secondary border-secondary border-b':appraisalKpiSettingEmp.select.pmsEvaluationRoundId==item.pmsEvaluationRoundId,'hover:text-gray-900':!(appraisalKpiSettingEmp.select.pmsEvaluationRoundId==item.pmsEvaluationRoundId)}"
                    (click)="appraisalKpiSettingEmp.select.pmsEvaluationRoundId !== item.pmsEvaluationRoundId && selectAppraisalKpiSettingEmp(item)">
                    {{item.pmsEvaluationRoundId}}
                  </span>
                </div>
              </ng-container>
            </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]="employee.data.picture?getImg(employee.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('EmployeeInformation')">
                  <div class="flex justify-between">
                    <h5 class="box-title align-center">{{'EmployeeInformation' | translate}}</h5>
                    <i *ngIf="menuClose.get('EmployeeInformation')" title="แสดง"
                      class="bg-white cursor-pointer border ti ti-chevron-down"
                      style="padding: 1px;border-radius:10px;font-size:27px"
                      (click)="menuClose.set('EmployeeInformation',false)"></i>
                    <i *ngIf="!menuClose.get('EmployeeInformation')" title="ปิด"
                      class="bg-white cursor-pointer border ti ti-chevron-up"
                      style="padding: 1px;border-radius:10px;font-size:27px"
                      (click)="menuClose.set('EmployeeInformation',true)"></i>
                  </div>
                </div>
                <div class="box-body py-2" [class.hidden]="menuClose.get('EmployeeInformation')">
                  <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;">
                          {{'EmployeeCode' | translate}}
                        </td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{employee.data.employeeId}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">
                          {{'NameSurname' | translate}}
                        </td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{translateText(employee.data.thFullName,employee.data.engFullName)}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">{{'Position'
                          | translate}}</td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{translateText(employee.data.position.tdesc,employee.data.position.edesc)}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">{{'Division'
                          | translate}}</td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{translateText(employee.data.bu1.tdesc,employee.data.bu1.edesc)}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">
                          {{'Department' | translate}}</td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{translateText(employee.data.bu2.tdesc,employee.data.bu2.edesc)}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">{{'Level' |
                          translate}}</td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{translateText(employee.data.pl.tdesc,employee.data.pl.edesc)}}
                        </td>
                      </tr>
                      <tr class="!border-0">
                        <td class="!p-2 align-start" style="font-size: 1rem;font-weight: 500;color:black;">{{'Email' |
                          translate}}</td>
                        <td class="!p-2 align-start">:</td>
                        <td class="font-medium !p-2 align-start !text-warp">
                          {{employee.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 - 202px)">
                <div style="overflow-x: hidden;min-height: calc(100vh - 281px);">
                  <ng-container *ngTemplateOutlet="kpiTable"></ng-container>
                </div>
                <div class="box-footer text-end space-x-3 rtl:space-x-reverse" style="margin: 0.5rem -24px -24px -24px;"
                  *ngIf="appraisalKpiSettingEmp.select.currentTopic.length">
                  <button class="ti-btn m-0 ti-btn-soft-secondary"
                    *ngIf="appraisalKpiSettingEmp.select.statusAll.code!='1' || lastConfirmBySelf"
                    (click)="savePmsTopic()">
                    <i class="ri-save-3-fill"></i>
                    ยืนยันข้อมูล
                  </button>
                  <button class="ti-btn m-0 ti-btn-soft-secondary"
                    *ngIf="appraisalKpiSettingEmp.select.statusAll.code=='1' && !lastConfirmBySelf"
                    (click)="approvePmsTopic()">
                    <i class="ri-save-3-fill"></i>
                    อนุมัติข้อมูล
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <ng-template #kpiTable>
    <div class="flex flex-col">
      <div class="flex flex-col gap-2">
        <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>
                  <th scope="col"
                    *ngIf="appraisalKpiSettingEmp.select.statusAll.code!='1' || lastConfirmBySelf">
                    การจัดการ</th>
                </tr>
              </thead>
              <tbody>
                <ng-container *ngFor="let item of appraisalKpiSettingEmp.select.currentTopic;let i = index">
                  <tr class="border-b border-gray-200" (mouseenter)="tableHover.set(item.pmsTopicId,true)"
                    (mouseleave)="tableHover.clear()"
                    [ngStyle]="{'background':tableHover.get(item.pmsTopicId)?'#f1f5f9':currentTopicColor(item.approveTopicStatus)}">
                    <td class="py-2" style="vertical-align: top">
                      &nbsp;
                      <ng-container
                        *ngIf="appraisalKpiSettingEmp.select.statusAll.code=='1'&&item.approveTopicStatus!=2 && !lastConfirmBySelf">
                        <input type="checkbox" class="ti-form-checkbox cursor-pointer"
                          [checked]="pmsTopicApprove.get(item.pmsTopicId)"
                          (click)="!pmsTopicApprove.get(item.pmsTopicId)?pmsTopicApprove.set(item.pmsTopicId , true):pmsTopicApprove.delete(item.pmsTopicId);">
                        &nbsp;
                      </ng-container>
                      {{item.pmsTopicId}}
                    </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.performanceGoalsDetail}}
                    </td>
                    <td class="py-2 text-center" style="vertical-align: top">
                      {{item.detailUnit}}
                    </td>
                    <td class="py-2 text-center" style="vertical-align: top">
                      {{item.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.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.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.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.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.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>
                    <td class="py-2 text-center" style="vertical-align: top"
                      *ngIf="appraisalKpiSettingEmp.select.statusAll.code!='1' || lastConfirmBySelf">
                      <ng-container *ngIf="item.approveTopicStatus==0">
                        <button type="button" class="  cursor-default" (click)="addPmsTopic(item.pmsTopicId)">
                          <i class="ti ti-circle-plus text-green-500 cursor-pointer" style="font-size: 20px;"></i>
                        </button>
                      </ng-container>
                      <ng-container *ngIf="item.approveTopicStatus!=0">
                        <button type="button" class="  cursor-default" (click)="deletePmsTopic(i)">
                          <i class="ti ti-trash  text-danger cursor-pointer" style="font-size: 20px;"></i>
                        </button>
                      </ng-container>

                    </td>
                  </tr>
                </ng-container>
                <tr
                  *ngIf="appraisalKpiSettingEmp.select.statusAll.code!='1' || lastConfirmBySelf">
                  <td class="py-2 text-center" style="vertical-align: center;justify-items:center" colspan="7">
                    <button type="button" class="flex text-start items-center cursor-default"
                      (click)="pmsTopicDialogOpen()">
                      <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 #pmsTopicDialog 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" (click)="selectPmsTopic()">
            <i class="ti ti-eraser text-base"></i>
            Clear
          </button>
        </div>
      </div>
    </div>
    <mat-dialog-content>
      <button type="button" class="ti-btn ti-btn-success h-45px m-0 shadow-md" (click)="pmsTopicTableDialogOpen()">
        เพิ่มจากหัวข้อการประเมิน
      </button>
      <!-- <label class="ti-form-label mt-2rem">ประเภทการประเมินผล<span class="text-danger">*</span></label>
      <div class="flex">
        <div class="relative flex rounded-md">
          <input type="text" class="ti-form-input rounded-sm ltr:rounded-r-sm rtl:rounded-l-sm focus:z-10" readonly
            style="padding-right: 3.5rem;" [(ngModel)]="pmsTopic.select.pmsType.tdesc">
          <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)="selectPmsType()">
              <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)="pmsTypeTableDialogOpen()">
              <i class="ri-search-line cursor-pointer text-gray"></i>
            </button>
          </div>
        </div>
      </div> -->
      <label class="ti-form-label mt-2rem">ชื่อหัวข้อ<span class="text-danger">*</span></label>
      <input type="text" class="ti-form-input" [(ngModel)]="pmsTopic.select.tdesc">
      <label class="ti-form-label mt-2rem">ชื่อหัวข้อ (อังกฤษ)</label>
      <input type="text" class="ti-form-input" [(ngModel)]="pmsTopic.select.edesc">
      <label class="ti-form-label mt-2rem">ตัวชี้วัดผลงานหลัก</label>
      <input type="text" class="ti-form-input" [(ngModel)]="pmsTopic.select.indicatorsDetail">
      <label class="ti-form-label mt-2rem">เป้าหมายผลงาน</label>
      <input type="text" class="ti-form-input" [(ngModel)]="pmsTopic.select.performanceGoalsDetail">
      <label class="ti-form-label mt-2rem">หน่วยนับ</label>
      <input type="text" class="ti-form-input" [(ngModel)]="pmsTopic.select.detailUnit">
      <label class="ti-form-label mt-2rem">กำหนดเวลาแล้วเสร็จ</label>
      <input type="text" class="ti-form-input" [(ngModel)]="pmsTopic.select.completionDate">
      <label class="ti-form-label mt-2rem">น้ำหนัก</label>
      <input type="text" class="ti-form-input" appMoneyInput [(ngModel)]="pmsTopic.select.weight">
      <label class="ti-form-label mt-2rem">ค่าเป้าหมาย</label>
      <div class="grid grid-cols-12 gap-x-2 mt-2rem">
        <label class="ti-form-label  col-span-3 align-center m-0">A (5 คะแนน)</label>
        <input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmsTopic.select.targetAdetail">
      </div>
      <div class="grid grid-cols-12 gap-x-2 mt-2rem">
        <label class="ti-form-label  col-span-3 align-center m-0">B (4 คะแนน)</label>
        <input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmsTopic.select.targetBdetail">
      </div>
      <div class="grid grid-cols-12 gap-x-2 mt-2rem">
        <label class="ti-form-label  col-span-3 align-center m-0">C (3 คะแนน)</label>
        <input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmsTopic.select.targetCdetail">
      </div>
      <div class="grid grid-cols-12 gap-x-2 mt-2rem">
        <label class="ti-form-label  col-span-3 align-center m-0">D (2 คะแนน)</label>
        <input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmsTopic.select.targetDdetail">
      </div>
      <div class="grid grid-cols-12 gap-x-2 mt-2rem">
        <label class="ti-form-label  col-span-3 align-center m-0">E (1 คะแนน)</label>
        <input type="text" class="ti-form-input col-span-9" [(ngModel)]="pmsTopic.select.targetEdetail">
      </div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button type="button" (click)="pmsTopicDialogClose()"
        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" (click)="addPmsTopic();pmsTopicDialogClose()"
        [class.ti-btn-disabled]="!pmsTopic.select.tdesc"
        [disabled]="!pmsTopic.select.tdesc">
        บันทึกข้อมูล
      </button>
    </mat-dialog-actions>
  </ng-template>

  <ng-template #pmsTopicTableDialog 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)]="syncfutionPmsTopic.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>
      <app-datagrid-syncfution [searchSettings]="syncfutionPmsTopic.searchSettings"
        [searchText]="syncfutionPmsTopic.search" [dataSource]="syncfutionPmsTopic.list"
        [columns]="syncfutionPmsTopic.columns" [checkBoxSetting]="false"
        (sendSelectData)="selectPmsTopic($event);addPmsTopic();pmsTopicTableDialogClose();pmsTopicDialogClose()">
      </app-datagrid-syncfution>

    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button type="button" (click)="pmsTopicTableDialogClose()"
        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 #pmsTypeTableDialog 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)]="syncfutionPmsType.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>
      <app-datagrid-syncfution [searchSettings]="syncfutionPmsType.searchSettings"
        [searchText]="syncfutionPmsType.search" [dataSource]="syncfutionPmsType.list"
        [columns]="syncfutionPmsType.columns" [checkBoxSetting]="false"
        (sendSelectData)="selectPmsType($event);pmsTypeTableDialogClose()">
      </app-datagrid-syncfution>

    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button type="button" (click)="pmsTypeTableDialogClose()"
        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>