<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>
                  {{'Back' | translate}}
                </button>
              </div>
              <span class="whitespace-nowrap relative" [ngStyle]="{'left':  evaluationForm=='sup' ? '105px':'0px'}">
                {{'AnnualEvaluation' | translate}} {{currentDate.getFullYear()}}
              </span>
            </div>
          </div>
        </div>
        <div class="flex flex-col w-3/4 gap-2">
          <div class="w-full mb-2 flex">
            <div class="w-1/2 flex flex-row gap-2">
              <ng-container *ngFor="let item of compentency.dataList; 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':compentency.data?.tdesc==item.tdesc,'hover:text-gray-900':!(compentency.data?.tdesc==item.tdesc)}"
                    (click)="compentency.data?.tdesc !== item.tdesc && changeForm(item)">
                    {{translateText(item.tdesc,item.edesc)}}
                  </span>
                </div>
              </ng-container>
            </div>
            <div class="w-1/2">
              <div class="font-size-18px font-weight-700  text-primary text-right">
                {{'EvaluatorStatus' | translate}}&nbsp;:&nbsp;{{currentStepTextShow() | translate}}
              </div>
            </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" *ngIf="kpiScorePartBoss.length > 0">
              <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" />
                    <ng-container *ngIf="kpiScorePartBoss[kpiScorePartBoss.length-1].score as grade">
                      <div class="flex gap-1">
                        <ng-container *ngFor="let s of [1,2,3,4,5]">
                          <i class="ti text-xl"
                            [ngClass]="s <= gradeStar(grade) ? 'ti-star-filled text-yellow-400' : 'ti-star text-gray-300'">
                          </i>
                        </ng-container>
                      </div>
                      <span class="text-sm font-semibold text-gray-700">GRADE: {{ grade }}</span>
                    </ng-container>
                  </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">
                          {{evaluatee.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(evaluatee.data.thFullName,evaluatee.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(evaluatee.data.position.tdesc,evaluatee.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(evaluatee.data.bu1.tdesc,evaluatee.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(evaluatee.data.bu2.tdesc,evaluatee.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(evaluatee.data.pl.tdesc,evaluatee.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">
                          {{evaluatee.data.email}}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="w-full" *ngIf="currentTap=='CompetencyEva'&&(evaluaterId!=evaluateeId||complete)">
              <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px">
                <div class="box-header" [class.border-none]="menuClose.get('WeightedScoreByTargetDegree')">
                  <div class="flex justify-between">
                    <h5 class="box-title align-center">{{'WeightedScoreByTargetDegree' | translate}}</h5>
                    <i *ngIf="menuClose.get('WeightedScoreByTargetDegree')" title="แสดง"
                      class="bg-white cursor-pointer border ti ti-chevron-down"
                      style="padding: 1px;border-radius:10px;font-size:27px;height:33px"
                      (click)="menuClose.set('WeightedScoreByTargetDegree',false)"></i>
                    <i *ngIf="!menuClose.get('WeightedScoreByTargetDegree')" title="ปิด"
                      class="bg-white cursor-pointer border ti ti-chevron-up"
                      style="padding: 1px;border-radius:10px;font-size:27px;height:33px"
                      (click)="menuClose.set('WeightedScoreByTargetDegree',true)"></i>
                  </div>
                </div>
                <div class="box-body py-2" [class.hidden]="menuClose.get('WeightedScoreByTargetDegree')">
                  <div class="w-full flex flex-col gap-2" *ngIf="compentency.data">
                    <div class="w-full flex flex-col gap-2 mt-2">
                      <div class="w-full flex flex-row gap-2">
                        <div class="flex-1 text-center font-size-18px font-weight-700" *ngFor="let item of [5,4,3,2,1]">
                          {{item}}</div>
                      </div>
                      <div class="w-full flex flex-row gap-2">
                        <div *ngFor="let item of [5,4,3,2,1]"
                          class="flex-1 border border-secondary text-center align-center"
                          style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                          {{compentencyScoreBoss[item-1]}}
                        </div>
                      </div>
                    </div>
                    <div class="w-full mt-2 flex justify-center">
                      <div class="flex flex-row  gap-2 w-full">
                        <div class="flex-1 font-size-18px font-weight-700 text-right align-center">
                          คะแนนรวม
                        </div>
                        <div class="flex-1 flex justify-center items-center">
                          <div
                            class="w-full border border-secondary text-center align-center text-indigo-600 font-semibold"
                            style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                            {{compentencyWeightTotalBoss}}
                          </div>
                        </div>
                        <div class="flex-1 font-size-18px font-weight-700 text-right align-center">
                          {{'AvgScore' | translate}}
                        </div>
                        <div class="flex-1 flex justify-center items-center">
                          <div
                            class="w-full border border-secondary text-center align-center text-indigo-600 font-semibold"
                            style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                            {{compentencyWeightScoreBoss}}
                          </div>
                        </div>
                        <div class="flex-1 font-size-18px font-weight-700 text-right align-center">
                          {{'Gap' | translate}}
                        </div>
                        <div class="flex-1 flex justify-center items-center">
                          <div
                            class="w-full border border-secondary  text-center align-center text-indigo-600 font-semibold"
                            style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                            {{compentencyGapBoss}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full" *ngIf="currentTap=='CompetencyEva'&&false">
              <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">
                    <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                      <h5 class="box-title align-center">{{'WeightedScoreByTargetDegree' | translate}}</h5>
                    </ng-container>
                    <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                      <h5 class="box-title align-center">ค่าถ่วงน้ำหนักตนเองของความสามารถในแต่ละระดับ</h5>
                    </ng-container>
                    <i *ngIf="menuClose.get('ค่าถ่วงน้ำหนักตนเองของความสามารถในแต่ละระดับ')" title="แสดง"
                      class="bg-white cursor-pointer border ti ti-chevron-down"
                      style="padding: 1px;border-radius:10px;font-size:27px;height:33px"
                      (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;height:33px"
                      (click)="menuClose.set('ค่าถ่วงน้ำหนักตนเองของความสามารถในแต่ละระดับ',true)"></i>
                  </div>
                </div>
                <div class="box-body py-2"
                  [class.hidden]="menuClose.get('ค่าถ่วงน้ำหนักตนเองของความสามารถในแต่ละระดับ')">
                  <div class="w-full flex flex-col gap-2" *ngIf="compentency.data">
                    <div class="w-full flex flex-col gap-2 mt-2">
                      <div class="w-full flex flex-row gap-2">
                        <div class="flex-1 text-center font-size-18px font-weight-700" *ngFor="let item of [5,4,3,2,1]">
                          {{item}}</div>
                      </div>
                      <div class="w-full flex flex-row gap-2">
                        <div *ngFor="let item of [5,4,3,2,1]"
                          class="flex-1 border border-secondary text-center align-center"
                          style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                          {{compentencyScore[item-1]}}
                        </div>
                      </div>
                    </div>
                    <div class="w-full mt-2 flex justify-center">
                      <div class="flex flex-row  gap-2 w-full">
                        <div class="flex-1 font-size-18px font-weight-700 text-right align-center">
                          คะแนนรวม
                        </div>
                        <div class="flex-1 flex justify-center items-center">
                          <div
                            class="w-full border border-secondary text-center align-center text-indigo-600 font-semibold"
                            style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                            {{compentencyWeightTotal}}
                          </div>
                        </div>
                        <div class="flex-1 font-size-18px font-weight-700 text-right align-center">
                          {{'AvgScore' | translate}}
                        </div>
                        <div class="flex-1 flex justify-center items-center">
                          <div
                            class="w-full border border-secondary text-center align-center text-indigo-600 font-semibold"
                            style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                            {{compentencyWeightScore}}
                          </div>
                        </div>
                        <div class="flex-1 font-size-18px font-weight-700 text-right align-center">
                          {{'Gap' | translate}}
                        </div>
                        <div class="flex-1 flex justify-center items-center">
                          <div
                            class="w-full border border-secondary  text-center align-center text-indigo-600 font-semibold"
                            style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                            {{compentencyGap}}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full"
              *ngIf="findMenu('Performance')&&(currentTap=='Performance'||currentTap=='SummaryAndFeedback')&&(evaluaterId!=evaluateeId||complete)">
              <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px">
                <div class="box-header" [class.border-none]="menuClose.get('EvaluationSummary')">
                  <div class="flex justify-between">
                    <h5 class="box-title align-center">{{'EvaluationSummary' | translate}}</h5>
                    <i *ngIf="menuClose.get('EvaluationSummary')" title="แสดง"
                      class="bg-white cursor-pointer border ti ti-chevron-down"
                      style="padding: 1px;border-radius:10px;font-size:27px"
                      (click)="menuClose.set('EvaluationSummary',false)"></i>
                    <i *ngIf="!menuClose.get('EvaluationSummary')" title="ปิด"
                      class="bg-white cursor-pointer border ti ti-chevron-up"
                      style="padding: 1px;border-radius:10px;font-size:27px"
                      (click)="menuClose.set('EvaluationSummary',true)"></i>
                  </div>
                </div>
                <div class="box-body py-2 flex flex-col gap-6 " [class.hidden]="menuClose.get('EvaluationSummary')">
                  <div class='flex-1 flex flex-row gap-2'>
                    <div class="flex-1 flex flex-col gap-2">
                      <ng-container *ngFor="let item of kpiScorePartBoss; let i=index">
                        <ng-container *ngIf="i<4 && i< kpiScorePartBoss.length-2">
                          <div class="flex flex-row">
                            <div class="flex-1" style="align-content:center">
                              {{item.text}}
                            </div>
                            <div class="flex-1 border border-secondary text-center align-center"
                              style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                              {{item.score}}
                            </div>
                          </div>
                        </ng-container>
                      </ng-container>
                    </div>
                    <div class="flex-1 flex flex-col gap-2">
                      <ng-container *ngFor="let item of kpiScorePartBoss; let i=index">
                        <ng-container *ngIf="i>=4 && i< kpiScorePartBoss.length-2">
                          <div class="flex flex-row">
                            <div class="flex-1" style="align-content:center">
                              {{item.text  | translate}}
                            </div>
                            <div class="flex-1 border border-secondary text-center align-center"
                              style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                              {{item.score}}
                            </div>
                          </div>
                        </ng-container>
                      </ng-container>
                    </div>
                  </div>
                  <div class='flex-1 flex flex-row gap-2'>
                    <ng-container *ngFor="let item of kpiScorePartBoss; let i=index">
                      <ng-container *ngIf="i >= kpiScorePartBoss.length-2">
                        <div class="flex-1 flex flex-col gap-2">
                          <div class="flex flex-row">
                            <div class="flex-1 font-size-18px font-weight-700" style="align-content:center">
                              {{item.text  | translate}}
                            </div>
                            <div
                              class="flex-1 border border-secondary text-center align-center text-indigo-600 font-semibold"
                              style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                              {{item.score}}
                            </div>
                          </div>
                        </div>
                      </ng-container>
                    </ng-container>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full"
              *ngIf="findMenu('Performance')&&(currentTap=='Performance'||currentTap=='SummaryAndFeedback')">
              <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">
                    <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                      <h5 class="box-title align-center">{{'EvaluationSummary' | translate}}</h5>
                    </ng-container>
                    <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                      <h5 class="box-title align-center">สรุปผลประเมินตนเอง</h5>
                    </ng-container>
                    <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 flex flex-col gap-6 " [class.hidden]="menuClose.get('สรุปผลประเมินตนเอง')">
                  <div class='flex-1 flex flex-row gap-2'>
                    <div class="flex-1 flex flex-col gap-2">
                      <ng-container *ngFor="let item of kpiScorePart; let i=index">
                        <ng-container *ngIf="i<4 && i< kpiScorePart.length-2">
                          <div class="flex flex-row">
                            <div class="flex-1" style="align-content:center">
                              {{item.text}}
                            </div>
                            <div class="flex-1 border border-secondary text-center align-center"
                              style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                              {{item.score}}
                            </div>
                          </div>
                        </ng-container>
                      </ng-container>
                    </div>
                    <div class="flex-1 flex flex-col gap-2">
                      <ng-container *ngFor="let item of kpiScorePart; let i=index">
                        <ng-container *ngIf="i>=4 && i< kpiScorePart.length-2">
                          <div class="flex flex-row">
                            <div class="flex-1" style="align-content:center">
                              {{item.text | translate}}
                            </div>
                            <div class="flex-1 border border-secondary text-center align-center"
                              style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                              {{item.score}}
                            </div>
                          </div>
                        </ng-container>
                      </ng-container>
                    </div>
                  </div>
                  <div class='flex-1 flex flex-row gap-2'>
                    <ng-container *ngFor="let item of kpiScorePart; let i=index; let l=last">
                      <ng-container *ngIf="i >= kpiScorePart.length-2 && !l">
                        <div class="flex-1 flex flex-col gap-2">
                          <div class="flex flex-row">
                            <div class="flex-1 font-size-18px font-weight-700" style="align-content:center">
                              {{item.text  | translate}}
                            </div>
                            <div
                              class="flex-1 border border-secondary text-center align-center text-indigo-600 font-semibold"
                              style="border-radius:10px;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));height: 30px;">
                              {{item.score}}
                            </div>
                          </div>
                        </div>
                      </ng-container>
                    </ng-container>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-full" *ngIf="compentency.data">
              <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px">
                <div class="box-header" [class.border-none]="menuClose.get('StatusEva')">
                  <div class="flex justify-between">
                    <h5 class="box-title align-center">{{'StatusEva' | translate}}</h5>
                    <i *ngIf="menuClose.get('StatusEva')" title="แสดง"
                      class="bg-white cursor-pointer border ti ti-chevron-down"
                      style="padding: 1px;border-radius:10px;font-size:27px"
                      (click)="menuClose.set('StatusEva',false)"></i>
                    <i *ngIf="!menuClose.get('StatusEva')" title="ปิด"
                      class="bg-white cursor-pointer border ti ti-chevron-up"
                      style="padding: 1px;border-radius:10px;font-size:27px"
                      (click)="menuClose.set('StatusEva',true)"></i>
                  </div>
                </div>
                <div class="box-body space-y-4 text-center" [class.hidden]="menuClose.get('StatusEva')">
                  <ng-container
                    *ngFor="let apsEmp of ['apsassessy','apsapprove1','apsapprove2','apsapprove3','apsapprove4','apsapprove5']; let i=index ; let f=first">
                    <div class="flex flex-row" *ngIf="returnField(compentency.data,apsEmp+'.thFullName')">
                      <div class="mx-auto relative">
                        <div class="h-full flex items-center justify-center pb-4" style="width: 32px;">
                          <div class="h-full w-[3px] bg-gray-100 pointer-events-none"></div>
                        </div>
                        <div class="absolute  rounded-full text-center  align-center"
                          style="justify-items:center;top:-5px">
                          <span class="flex align-items-center justify-content-center rounded-circle text-white"
                            [class]="assessmentStatusClass(compentency.data.currentStep,i,returnField(compentency.data,apsEmp+'.status'))">
                            <i
                              [class]="assessmentStatusIcon(compentency.data.currentStep,i,returnField(compentency.data,apsEmp+'.status'))"></i>
                          </span>
                        </div>
                      </div>
                      <div class="flex w-full pb-4">
                        <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
                          <div class="sm:flex">
                            <h3 class="text-start my-auto text-gray-500 " style="line-height: 1.5">
                              <p style="font-size: 1rem;font-weight: 500;color:black">
                                {{assessmentStatusText(compentency.data.currentStep,i,returnField(compentency.data,apsEmp+'.status'))}}
                              </p>
                              <p class="font-medium ">
                                <ng-container *ngIf="i==0">
                                  {{'Appraisee' | translate}}
                                </ng-container>
                                <ng-container *ngIf="i>0">
                                  {{'Approver'+i+'Eva' | translate}}
                                </ng-container>
                              </p>
                              <p class="font-medium ">
                                {{translateText(returnField(compentency.data,apsEmp+'.thFullName'),returnField(compentency.data,apsEmp+'.enFullName'))}}
                              </p>
                            </h3>
                          </div>
                        </div>
                      </div>
                    </div>
                  </ng-container>
                </div>
              </div>
            </div>
            <div class="w-full" *ngIf="commentAllFilter().length">
              <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px">
                <div class="box-header" [class.border-none]="menuClose.get('Timeline')">
                  <div class="flex justify-between">
                    <h5 class="box-title align-center">{{'Timeline' | translate}}</h5>
                    <i *ngIf="menuClose.get('Timeline')" title="แสดง"
                      class="bg-white cursor-pointer border ti ti-chevron-down"
                      style="padding: 1px;border-radius:10px;font-size:27px"
                      (click)="menuClose.set('Timeline',false)"></i>
                    <i *ngIf="!menuClose.get('Timeline')" title="ปิด"
                      class="bg-white cursor-pointer border ti ti-chevron-up"
                      style="padding: 1px;border-radius:10px;font-size:27px"
                      (click)="menuClose.set('Timeline',true)"></i>
                  </div>
                </div>
                <div class="box-body space-y-4 text-center" [class.hidden]="menuClose.get('Timeline')">
                  <div class="flex flex-row" *ngFor="let item of commentAllFilter(); let i=index">
                    <div class="mx-auto relative">
                      <div class="h-full flex items-center justify-center pb-4" style="width: 32px;">
                        <div class="h-full w-[3px] bg-gray-100 pointer-events-none"></div>
                      </div>
                      <div class="absolute  rounded-full text-center  align-center"
                        style="justify-items:center;top:-5px">
                        <span class="flex align-items-center justify-content-center rounded-circle text-white"
                          [class]="statusCompetencyClass(item.statusType)">
                          <i [class]="statusCompetencyIcon(item.statusType)"></i>
                        </span>
                      </div>
                    </div>
                    <div class="flex w-full pb-4">
                      <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
                        <div class="w-full">
                          <h3 class="text-start my-auto text-gray-500 " style="line-height: 1.5">
                            <p style="font-size: 1rem;font-weight: 500;color:black;white-space: nowrap;">
                              {{statusCompetencyText(item.statusType) | translate}}
                            </p>
                            <p class="font-medium">
                              {{item.thFullName}}
                            </p>
                            <p class="font-medium text-right">
                              {{convertDate(item.commentDate)}}
                            </p>
                          </h3>
                        </div>
                        <div *ngIf="item.comment" class="border border-gray-200 bg-gray-50 p-4 rounded-sm m-0">
                          <p class="text-start text-xs text-gray-500 " style="line-height: 1.5">
                            {{item.comment}}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </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">
                <div class="flex flex-row gap-2">
                  <ng-container *ngFor="let item of menuList">
                    <button type="button" class="flex-1 flex flex-row border bg-white p-2 justify-center"
                      style="border-radius:20px"
                      (click)="currentTap=item.text;(currentTap=='Performance'||currentTap=='SummaryAndFeedback'?currentPart='':null);"
                      [ngClass]="{'!bg-primary text-white':currentTap==item.text}"
                      [routerLink]="evaluationForm=='sup'?null:'../'+item.link">
                      <span class="overflow-hidden text-ellipsis whitespace-nowrap align-center">
                        {{item.text | translate}}
                      </span>
                      <ng-container *ngIf="item.text=='CompetencyEva'">
                        &nbsp;
                        <span class="flex align-center justify-content-center rounded-circle text-white"
                          [class.bg-danger]="compentencyFormRemain" [class.bg-success]="!compentencyFormRemain">
                          <ng-container *ngIf="compentencyFormRemain">
                            {{compentencyFormRemain}}
                          </ng-container>
                          <i *ngIf="!compentencyFormRemain" class="ti ti-check"></i>
                        </span>
                      </ng-container>
                      <ng-container *ngIf="item.text=='Performance'">
                        &nbsp;
                        <span class="flex align-items-center justify-content-center rounded-circle text-white"
                          [class.bg-danger]="kpiFormRemain" [class.bg-success]="!kpiFormRemain">
                          <ng-container *ngIf="kpiFormRemain">
                            {{kpiFormRemain}}
                          </ng-container>
                          <i *ngIf="!kpiFormRemain" class="ti ti-check"></i>
                        </span>
                      </ng-container>
                    </button>
                  </ng-container>
                </div>
              </div>
              <div #scrollContainer class="box-body pt-0" *ngIf="compentency.data&&evaluaterId&&evaluateeId"
                style="overflow-y: auto; height: calc(100vh - 253px)">
                <div class="min-height: calc(100vh - 406px);" [class.hidden]="currentTap!='EvaluationInfo'">
                  <app-pms-information [statusType]="compentency.data.statusType" [canSave]="canSave"
                    [appraisalPms]="compentency.data.pms" [appraisalCompentencyList]="compentency.data.competency"
                    [inforGapBoss]="inforGapBoss" [inforWeightBoss]="inforWeightBoss" [inforGap]="inforGap"
                    [inforWeight]="inforWeight"
                    [kpiScoreBoss]="kpiScorePartBoss.length > 1 ?kpiScorePartBoss[kpiScorePartBoss.length-2].score : ''"
                    [kpiScore]="kpiScorePart.length > 1 ?kpiScorePart[kpiScorePart.length-2].score : ''"
                    [kpiGrade]="kpiScorePartBoss.length > 0 ?kpiScorePartBoss[kpiScorePartBoss.length-1].score : ''"
                    [kpiName]="compentency.data.tdesc" (sendCurrentTap)="currentTap=$event"
                    (sendCurrentPart)="currentPart=$event" [evaluaterId]="evaluaterId" [evaluateeId]="evaluateeId"
                    [currentStep]="compentency.data.currentStep" [complete]="complete"></app-pms-information>
                </div>
                <div class="min-height: calc(100vh - 406px);" [class.hidden]="currentTap!='CompetencyEva'">
                  <app-pms-competency [currentTap]="currentTap" [canSave]="canSave" [fCurrentPart]="currentPart"
                    [appraisalCompentencyList]="compentency.data.competency" [evaluaterId]="evaluaterId"
                    [evaluateeId]="evaluateeId" [canEdit]="canEdit" [currentStep]="compentency.data.currentStep"
                    [dateIso]="dateIso" (compentencyScoreBoss)="compentencyScoreBoss=$event"
                    (compentencyScore)="compentencyScore=$event"
                    (compentencyWeightTotalBoss)="compentencyWeightTotalBoss=$event"
                    (compentencyWeightTotal)="compentencyWeightTotal=$event"
                    (compentencyWeightScoreBoss)="compentencyWeightScoreBoss=$event"
                    (compentencyGapBoss)="compentencyGapBoss=$event"
                    (compentencyWeightScore)="compentencyWeightScore=$event" (compentencyGap)="compentencyGap=$event"
                    (compentencyFormRemain)="compentencyFormRemain=$event"
                    (compentencyForm)="compentency.data.competency=$event" (sendInforGapBoss)="inforGapBoss=$event"
                    (sendInforWeightBoss)="inforWeightBoss=$event" (sendInforGap)="inforGap=$event"
                    (sendInforWeight)="inforWeight=$event" (scrollToMenuId)="scrollToMenu($event)"
                    [complete]="complete"></app-pms-competency>
                </div>
                <div class="min-height: calc(100vh - 406px);"
                  [class.hidden]="currentTap!='Performance'&&currentTap!='SummaryAndFeedback'">
                  <app-pms-kpi [canSave]="canSave" [appraisalPms]="compentency.data.pms" [currentTap]="currentTap"
                    [currentPart]="currentTap" [evaluaterId]="evaluaterId" [evaluateeId]="evaluateeId"
                    [canEdit]="canEdit" [currentStep]="compentency.data.currentStep" [dateIso]="dateIso"
                    (kpiFormRemain)="kpiFormRemain=$event" (scorePartBoss)="kpiScorePartBoss=$event"
                    (scorePart)="kpiScorePart=$event" (kpiForm)="compentency.data.pms=$event"
                    (scrollToMenuId)="scrollToMenu($event)" [inforWeight]="inforWeightBoss"
                    [compentencyFormRemain]="compentencyFormRemain" [complete]="complete"></app-pms-kpi>
                </div>
                <div class="min-height: calc(100vh - 406px);" [class.hidden]="currentTap!='IDP'">
                  <app-pms-idp [currentTap]="currentTap" [canSave]="canSave" [appraisalIdp]="compentency.data.idp"
                    [evaluaterId]="evaluaterId" [evaluateeId]="evaluateeId"
                    [canEdit]="evaluationForm=='sup'?canEdit:false" [currentStep]="compentency.data.currentStep"
                    [dateIso]="dateIso" (idpForm)="compentency.data.idp=$event" [complete]="complete"></app-pms-idp>
                </div>
                <ng-container *ngIf="compentency.data&&canSave">
                  <div class="box-footer text-end space-x-3 rtl:space-x-reverse"
                    style="margin: 0.5rem -24px -24px -24px;">
                    <div class="pb-4 space-y-3 dark:border-white/10">
                      <textarea type="text" class="ti-form-input" rows="2" [placeholder]="'CommentHere' | translate"
                        [(ngModel)]="comment"></textarea>
                    </div>
                    <!-- <button (click)="toggleStatusPdfPrint()" class="ti-btn m-0 ti-btn-soft-warning"
                      *ngIf="currentTap == 'IDP'">
                      <i class="ri-draft-fill"></i>
                      PDF
                    </button> -->
                    <button (click)="save('approve')" class="ti-btn m-0 ti-btn-soft-secondary"
                      [disabled]="compentencyFormRemain||kpiFormRemain"
                      [class.ti-btn-disabled]="compentencyFormRemain||kpiFormRemain">
                      <i class="ri-save-3-fill"></i>
                      <ng-container *ngIf="compentency.data.currentStep == '0'">
                        {{'Confirm' | translate}}
                      </ng-container>
                      <ng-container *ngIf="compentency.data.currentStep != '0'">
                        อนุมัติ
                      </ng-container>
                    </button>
                    <button (click)="save('draft')" class="ti-btn m-0 ti-btn-soft-success"
                      *ngIf="compentency.data.currentStep == '0'||compentency.data.currentStep == '1'">
                      <i class="ri-draft-fill"></i>
                      {{'SaveDraft' | translate }}
                    </button>
                    <button (click)="save('noApprove')" class="ti-btn m-0 ti-btn-soft-danger"
                      *ngIf="compentency.data.currentStep != '0' && compentency.data.currentStep != '1'">
                      <i class="ri-reply-fill"></i>
                      ไม่อนุมัติ
                    </button>
                  </div>
                </ng-container>
              </div>
              <!-- <div class="box-footer text-end space-x-3 rtl:space-x-reverse">

              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>