<ng-container *ngTemplateOutlet="competency"></ng-container>
<ng-template #competency>
  <div class="flex flex-col">
    <div class="flex flex-row py-2 gap-2 sticky" style="top:0;z-index:2;background: white;">
      <ng-container *ngFor="let appraisalCompentency of appraisalCompentencyList ;let i=index">
        <button type="button" class="flex justify-center !items-center border bg-white p-2 text-center font-semibold"
          style="border-radius:20px;width: 100px"
          (click)="getAppraisalCompentencyForm(i);currentPart=appraisalCompentency.comType"
          [ngClass]="{'!bg-primary text-white':currentPart==appraisalCompentency.comType}">
          {{appraisalCompentency.comType}}
          &nbsp;
          <span class="flex align-center justify-center rounded-circle text-white" [class.bg-danger]="formRemain(i)"
            [class.bg-success]="!formRemain(i)">
            <ng-container *ngIf="formRemain(i)">
              {{formRemain(i)}}
            </ng-container>
            <i *ngIf="!formRemain(i)" class="ti ti-check"></i>
          </span>
        </button>
      </ng-container>
      <div class="flex justify-around !items-center border bg-white p-2 text-right"
        style="border-radius:20px;width: 100px;margin-left: auto;--tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity));">
        <i [title]="'ShowAll' | translate" class="bg-white cursor-pointer border ti ti-chevron-down"
          style="padding: 1px;border-radius:5px;font-size:27px" (click)="allBiOpen(true)"></i>
        <i [title]="'HideAll' | translate" class="bg-white cursor-pointer border ti ti-chevron-up"
          style="padding: 1px;border-radius:5px;font-size:27px" (click)="allBiOpen(false)"></i>
      </div>
    </div>
    <div class="flex flex-col gap-2 relative" style="overflow-y: auto;min-height: calc(100vh - 480px);">
      <ng-container *ngFor="let item2 of appraisalCompentencyFilter();let i = index;let f= first">
        <button type="button" [attr.id]="'menu-' + i"
          class="p-4 w-full text-white text-left bg-gradient-to-r from-primary to-secondary font-semibold relative"
          style="border-radius:20px"
          (click)="scrollToMenu(i);
          allBiOpen(!biOpen.get(item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId),item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId)">
          <span class="absolute -translate-y-1/5  rounded-circle text-white" [class.bg-danger]="inFormRemain(item2)"
            [class.bg-success]="!inFormRemain(item2)">
            <ng-container *ngIf="inFormRemain(item2)">
              {{inFormRemain(item2)}}
            </ng-container>
            <i *ngIf="!inFormRemain(item2)" class="ti ti-check"></i>
          </span>
          <span style="padding-left:50px">
            {{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId}}
          </span>
          &nbsp;
          <span>
            {{item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.tdesc}}
          </span>
          <i *ngIf="item2.competencyFiles" class="ti ti-download absolute"
            style="font-size: 27px;right: 28px;top: 12px;" (click)="downloadFile($event,item2.competencyFiles)"></i>
        </button>
        <ng-container
          *ngIf="biOpen.get(item2.groupAssessment1.competencyIndicatorsCourses1Mini.competencyIndicatorsCourses0.competencyTopic.competencyTopicId)">
          <table style="table-layout: fixed; width: 100%;">
            <thead class="border-b border-gray-200">
              <tr style="height:35px">
                <th scope="col">Behavior Indicator (BI)</th>
                <th scope="col">{{'Tools' | translate}}
                  <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                    <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
                      <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">
                          <div>เครื่องมือประเมิน</div>
                          <div class="text-start">O = แบบสังเกต</div>
                          <div class="text-start">P = แบบการปฏิบัติงาน</div>
                          <div class="text-start">D = การบันทึก/เอกสาร</div>
                          <div class="text-start">I = การสัมภาษณ์</div>
                          <div class="text-start">T = แบบทดสอบ</div>
                        </div>
                      </div>
                    </a>
                  </div>
                </th>
                <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                  <th scope="col" style="width:500px">
                    {{'TargetDegree' | translate}}
                    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                      <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
                        <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">
                            <div>คะแนน (Score)</div>
                            <div class="text-start">
                              คะแนน 1 = ทำได้ต่ำกว่าความคาดหวัง ในระดับถัดลงมา 1 ระดับ จำนวน 1-2 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 2 = ทำได้ต่ำกว่าความคาดหวัง ในระดับถัดลงมา 1 ระดับ จำนวน 3-5 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 3 = ได้ตามความคาดหวัง 1-2 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 4 = ได้ตามความคาดหวัง 3-4 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 5 = ได้ตามความคาดหวัง 5 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 6 = ได้เกินความคาดหวัง ในระดับถัดขึ้นไป 1 ระดับ จำนวน 2-3 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 7 = ได้เกินความคาดหวัง ในระดับถัดขึ้นไป 1 ระดับ จำนวน 4-5 ข้อ
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>
                  </th>
                </ng-container>
                <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                  <th scope="col" style="width:325px">
                    {{'TargetDegree' | translate}}
                    <div class="hs-tooltip ti-main-tooltip [--trigger:hover]">
                      <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:;">
                        <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">
                            <div>คะแนน (Score)</div>
                            <div class="text-start">
                              คะแนน 1 = ทำได้ต่ำกว่าความคาดหวัง ในระดับถัดลงมา 1 ระดับ จำนวน 1-2 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 2 = ทำได้ต่ำกว่าความคาดหวัง ในระดับถัดลงมา 1 ระดับ จำนวน 3-5 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 3 = ได้ตามความคาดหวัง 1-2 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 4 = ได้ตามความคาดหวัง 3-4 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 5 = ได้ตามความคาดหวัง 5 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 6 = ได้เกินความคาดหวัง ในระดับถัดขึ้นไป 1 ระดับ จำนวน 2-3 ข้อ
                            </div>
                            <div class="text-start">
                              คะแนน 7 = ได้เกินความคาดหวัง ในระดับถัดขึ้นไป 1 ระดับ จำนวน 4-5 ข้อ
                            </div>
                          </div>
                        </div>
                      </a>
                    </div>
                  </th>
                  <th scope="col">ประเมินตนเอง</th>
                </ng-container>
              </tr>
            </thead>
            <tbody>
              <ng-container
                *ngFor="let bi of item2.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList;let i2 = index;let f = first">
                <tr class="border-b border-gray-200" (mouseenter)="tableHover.set(bi.behavioralIndicators,true)"
                  (mouseleave)="tableHover.clear()"
                  [ngStyle]="{'background':tableHover.get(bi.behavioralIndicators)?'#f1f5f9':'#ffffff'}">
                  <td class="py-2" style="vertical-align: top">{{bi.behavioralIndicators}}</td>
                  <td class="py-2 text-center text-indigo-600 font-semibold" style="vertical-align: top">
                    {{bi.assessmentId}}</td>
                  <td class="py-2 text-center" style="vertical-align: top">
                    <div class="flex flex-row justify-center gap-2 mb-2">
                      <ng-container *ngFor="let item of [5,4,3,2,1];let f = first">
                        <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                          <button type="button"
                            class="h-12 w-12 p-0 shadow border text-soft-secondary-no-hover bg-white"
                            style="border-radius:10px"
                            (mouseenter)="biScore.set(bi.behavioralIndicators+bi.assessmentId,item)"
                            (mouseleave)="biScore.clear()"
                            (click)="bi.competencyBehavioral.scoreTopicExpectation=item;bi.competencyBehavioral.scoreTopicExpectationBoss=item;calweightScore()"
                            [ngClass]="{
                              '!border-secondary':  bi.competencyBehavioral.scoreTopicExpectation>=item||(biScore.get(bi.behavioralIndicators+bi.assessmentId) ?? 0)>=item ,
                              '!text-indigo-600':bi.competencyBehavioral.scoreTopicExpectation>item||(biScore.get(bi.behavioralIndicators+bi.assessmentId) ?? 0)>item,
                              '!text-white !bg-secondary': bi.competencyBehavioral.scoreTopicExpectation==item||(biScore.get(bi.behavioralIndicators+bi.assessmentId) ?? 0)==item ,
                              'pointer-events-none':!canEdit}">
                            {{item}}
                          </button>
                        </ng-container>
                        <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                          <button type="button"
                            class="h-12 w-12 p-0 shadow border text-soft-secondary-no-hover bg-white"
                            style="border-radius:10px"
                            (mouseenter)="biScore.set(bi.behavioralIndicators+bi.assessmentId,item)"
                            (mouseleave)="biScore.clear()"
                            (click)="bi.competencyBehavioral.scoreTopicExpectationBoss=item;calweightScore()" [ngClass]="{
                              '!border-secondary':  bi.competencyBehavioral.scoreTopicExpectationBoss>=item||(biScore.get(bi.behavioralIndicators+bi.assessmentId) ?? 0)>=item ,
                              '!text-indigo-600':bi.competencyBehavioral.scoreTopicExpectationBoss>item||(biScore.get(bi.behavioralIndicators+bi.assessmentId) ?? 0)>item,
                              '!text-white !bg-secondary': bi.competencyBehavioral.scoreTopicExpectationBoss==item||(biScore.get(bi.behavioralIndicators+bi.assessmentId) ?? 0)==item ,
                              'pointer-events-none':!canEdit}">
                            {{item}}
                          </button>
                        </ng-container>
                      </ng-container>
                    </div>
                    <div class="flex justify-center" style="height: 20px;white-space: nowrap; overflow: visible">
                      <span *ngIf="biScore.get(bi.behavioralIndicators+bi.assessmentId)" class="text-indigo-600">
                        {{scoreDescriptions[(biScore.get(bi.behavioralIndicators+bi.assessmentId) ?? 0)] }}
                      </span>
                      <span *ngIf="!biScore.get(bi.behavioralIndicators+bi.assessmentId)" class="text-indigo-600">
                        {{scoreDescriptions[bi.competencyBehavioral.scoreTopicExpectationBoss] }}
                      </span>
                    </div>
                  </td>
                  <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                    <td class="py-2 text-center text-indigo-600 font-semibold" style="vertical-align: top">
                      {{bi.competencyBehavioral.scoreTopicExpectationBoss}}
                    </td>
                  </ng-container>
                </tr>
              </ng-container>
            </tbody>
          </table>
        </ng-container>
      </ng-container>
      <button *ngIf="appraisalCompentencyFilter().length" [attr.id]="'menu-' + appraisalCompentencyFilter().length"
        type="button" class="p-4 w-full text-white text-left bg-gradient-to-r from-primary to-secondary font-semibold"
        style="  border-radius:20px"
        (click)="scrollToMenu(appraisalCompentencyFilter().length);allBiOpen(!biOpen.get('สรุป'),'สรุป')">
        <span style="padding-left:50px">
          {{'Summary' | translate}}
        </span>
      </button>
      <ng-container *ngIf="biOpen.get('สรุป')">
        <div class="pb-1rem px-2rem">
          <div class="py-2 grid grid-cols-11">
            <div class="col-span-8" style="font-size: 1rem;font-weight: 500; border-radius:20px">
              {{'TargetDegree' | translate}}
            </div>
            <div class="col-span-3 grid grid-cols-5">
              <div class="col-span-1 text-center" *ngFor="let item of [5,4,3,2,1]">{{item}}</div>
            </div>
          </div>
          <div class="py-2 grid grid-cols-11">
            <div class="col-span-8">{{'TallyOfMarksPerRatingLevel1' | translate}}</div>
            <div class="col-span-3 grid grid-cols-5">
              <!-- <div class="col-span-1 text-center">
                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].weightScore7Boss}}
              </div>
              <div class="col-span-1 text-center">
                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].weightScore6Boss}}
              </div> -->
              <div class="col-span-1 text-center">
                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].weightScore5Boss}}
              </div>
              <div class="col-span-1 text-center">
                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].weightScore4Boss}}
              </div>
              <div class="col-span-1 text-center">
                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].weightScore3Boss}}
              </div>
              <div class="col-span-1 text-center">
                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].weightScore2Boss}}
              </div>
              <div class="col-span-1 text-center">
                {{appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].weightScore1Boss}}
              </div>
            </div>
          </div>
          <div class="py-2 grid grid-cols-11">
            <div class="col-span-8">{{'ScoreMultiplierPerLevel2' | translate}}</div>
            <div class="col-span-3 grid grid-cols-5">
              <!-- <div class="col-span-1 text-center">{{setting.data.settingScore7}}</div>
              <div class="col-span-1 text-center">{{setting.data.settingScore6}}</div> -->
              <div class="col-span-1 text-center">{{setting.data.settingScore5}}</div>
              <div class="col-span-1 text-center">{{setting.data.settingScore4}}</div>
              <div class="col-span-1 text-center">{{setting.data.settingScore3}}</div>
              <div class="col-span-1 text-center">{{setting.data.settingScore2}}</div>
              <div class="col-span-1 text-center">{{setting.data.settingScore1}}</div>
            </div>
          </div>
          <div class="py-2 grid grid-cols-11">
            <div class="col-span-8">{{'WeightedScore1x2' | translate}}</div>
            <div class="col-span-3 grid grid-cols-5">
              <div class="col-span-1 text-center" *ngFor="let item of [5,4,3,2,1]">{{calWeightScoreBoss(item)}}
              </div>
            </div>
          </div>
          <div class="py-2 grid grid-cols-11">
            <div class="col-span-8 font-semibold" style=" border-radius:20px">{{'TotalWeightedScore' | translate}}
            </div>
            <div class="col-span-3 grid grid-cols-1">
              <div class="col-span-5 text-center text-indigo-600 font-semibold">
                {{showNumber(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].weightedTotalBoss)}}
              </div>
            </div>
          </div>
          <div class="py-2 grid grid-cols-11">
            <div class="col-span-8 font-semibold" style=" border-radius:20px">{{'FinalAverageScore' | translate}}
            </div>
            <div class="col-span-3 grid grid-cols-1">
              <div class="col-span-5 text-center text-indigo-600 font-semibold">
                {{showNumber(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].averageScoreBoss)}}
              </div>
            </div>
          </div>
        </div>
        <div class="pb-2rem px-2rem">
          <div class="overflow-auto rounded-top-0.65rem">
            <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover2">
              <thead class="height-50px">
                <tr class="font-size-12px">
                  <ng-container
                    *ngFor="let item of  ['CompetencyRatingScale','AssessmentResultA','GapResultEva'];let f = first ;let l = last">
                    <th scope="col" [attr.rowspan]="f?'1':'2'" [attr.colspan]="f?'2':'1'"
                      class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                      <span class="font-size-12px font-weight-700 ">{{ item | translate}}</span>
                    </th>
                  </ng-container>
                </tr>
                <tr class="font-size-12px">
                  <ng-container *ngFor="let item of ['RatingCriteria','Conditions']">
                    <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                      {{ item | translate}}
                    </th>
                  </ng-container>
                </tr>
              </thead>
              <tbody *ngIf="checkSheet.length">
                <tr *ngFor="let item of checkSheet;let i = index" (mouseenter)="hoveredCode2 = 'true'"
                  (mouseleave)="hoveredCode2 = null" [ngClass]="{ 'table-hover2': 'true' === hoveredCode2 }">
                  <td class="align-start" rowspan="2">
                    <div *ngFor="let item2 of item.score">
                      <span>{{item2 | translate}} </span><br>
                    </div>
                  </td>
                  <td class="align-start" rowspan="2">
                    <div *ngFor="let item2 of item.condition">
                      <span>{{item2 | translate}} </span><br>
                    </div>
                  </td>
                  <td class="align-start text-center text-indigo-600 font-semibold">
                    {{calAverage(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].averageScoreBoss)}}
                  </td>
                  <td class="align-start text-center text-indigo-600 font-semibold">
                    {{calGap(appraisalCompentencyList[appraisalCompentencyIndex].masfromEvaluationAssessment1List[0].averageScoreBoss)}}
                  </td>
                </tr>
                <tr (mouseenter)="hoveredCode2 = 'true'" (mouseleave)="hoveredCode2 = null"
                  [ngClass]="{ 'table-hover2': 'true' === hoveredCode2 }">
                  <td class="align-start !white-space-normal" colspan="4">
                    หมายเหตุ<br>
                    ผลการประเมินอาจมีการเปลี่ยนแปลงเงื่อนไขข้อ 1-3 เนื่องจากมีคะแนนต่ำกว่าเกณฑ์ในบางข้อ
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </ng-container>
    </div>
  </div>
</ng-template>