<div class="flex flex-col gap-2 pt-2" style="overflow-y: auto;min-height: calc(100vh - 422px)">
    <div class="flex">
        <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" (click)="menuClose.set('Compentency',!menuClose.get('Compentency'))">
            {{'CompetencyDetail' | translate}}
        </button>
    </div>
    <ng-container *ngIf="!menuClose.get('Compentency')">
        <table style="table-layout: fixed; width: 100%;">
            <thead class="border-b border-gray-200">
                <tr style="height:35px">
                    <th scope="col">{{'EvaluationForm' | translate}}</th>
                    <th scope="col text-center">{{'StartDate'| translate}}</th>
                    <th scope="col text-center">{{'EndDate' | translate}}</th>
                    <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                        <th scope="col text-center">{{'AverageScore' | translate}}</th>
                        <th scope="col text-center">{{'GapResult'| translate}}</th>
                    </ng-container>
                    <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                        <th scope="col text-center">คะแนนเฉลี่ยตนเอง
                        </th>
                        <th scope="col text-center">{{'AverageScore' | translate}}</th>
                        <th scope="col text-center">ผล GAP ตนเอง</th>
                        <th scope="col text-center">{{'GapResult' | translate}}</th>
                    </ng-container>
                    <th scope="col text-center">{{'Action' | translate}}</th>
                </tr>
            </thead>
            <tbody>
                <ng-container *ngFor="let item of appraisalCompentencyList; let i=index">
                    <tr class="border-b border-gray-200"
                        (mouseenter)="tableHover.set(item.masfromEvaluationAssessment1List[0].competencyType.tdesc,true)"
                        (mouseleave)="tableHover.clear()"
                        [ngStyle]="{'background':tableHover.get(item.masfromEvaluationAssessment1List[0].competencyType.tdesc)?'#f1f5f9':'#ffffff'}">
                        <td class="py-2" style="vertical-align: top">
                            {{item.masfromEvaluationAssessment1List[0].competencyType.tdesc}}
                        </td>
                        <td class="py-2 text-center" style="vertical-align: top">
                            {{formatThaiDate(item.masfromEvaluationRound.apsPeriodStart)}}
                        </td>
                        <td class="py-2 text-center" style="vertical-align: top">
                            {{formatThaiDate(item.masfromEvaluationRound.apsPeriodEnd)}}
                        </td>
                        <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                            <td class="py-2 text-center" style="vertical-align: top">
                                {{inforWeight.get(item.comType)!=='undefined' && inforWeight.get(item.comType)
                                !=='null'?inforWeight.get(item.comType): '0'}}
                            </td>
                            <td class="py-2 text-center" style="vertical-align: top">
                                {{inforGap.get(item.comType)!=='null'?inforGap.get(item.comType): ''}}
                            </td>
                        </ng-container>
                        <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                            <td class="py-2 text-center" style="vertical-align: top">
                                {{inforWeight.get(item.comType)!=='undefined' && inforWeight.get(item.comType)
                                !=='null'?inforWeight.get(item.comType): '0'}}
                            </td>
                            <td class="py-2 text-center" style="vertical-align: top">
                                {{inforWeightBoss.get(item.comType) !=='null'?inforWeightBoss.get(item.comType): '0'}}
                            </td>
                            <td class="py-2 text-center" style="vertical-align: top">
                                {{inforGap.get(item.comType)!=='null'?inforGap.get(item.comType): ''}}
                            </td>
                            <td class="py-2 text-center" style="vertical-align: top">
                                {{inforGapBoss.get(item.comType)!=='null'?inforGapBoss.get(item.comType): ''}}
                            </td>
                        </ng-container>
                        <td class="py-2 text-center" style="vertical-align: top">
                            <div class="flex justify-center">
                                <button type="button" class="ti-btn rounded-sm" [class]="statusButtonClass(statusType)"
                                    (click)="sendCurrentTap.emit('แบบประเมินสมรรถนะ');sendCurrentPart.emit(statusType)"
                                    style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;">
                                    {{item.comType}}
                                </button>
                            </div>
                        </td>
                    </tr>
                </ng-container>
            </tbody>
        </table>
    </ng-container>
    <div class="flex" *ngIf="appraisalPms">
        <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" (click)="menuClose.set('PMS',!menuClose.get('PMS'))">
            {{'PerformanceManagementSystem(PMS)' | translate}}
        </button>
    </div>
    <ng-container *ngIf="appraisalPms&&!menuClose.get('PMS')">
        <table style="table-layout: fixed; width: 100%;">
            <thead class="border-b border-gray-200">
                <tr style="height:35px">
                 <th scope="col">{{'EvaluationForm' | translate}}</th>
                    <th scope="col text-center">{{'StartDate'| translate}}</th>
                    <th scope="col text-center">{{'EndDate' | translate}}</th>
                    <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                        <th scope="col text-center">{{'EvaluationResult'| translate}}</th>
                    </ng-container>
                    <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                        <th scope="col text-center">ผลการประเมินตนเอง</th>
                        <th scope="col text-center">{{'EvaluationResult' | translate}}</th>
                    </ng-container>
                    <th scope="col text-center">{{'Grade' | translate}}</th>
                    <th scope="col text-center">{{'Action' | translate}}</th>
                </tr>
            </thead>
            <tbody>
                <tr class="border-b border-gray-200" (mouseenter)="tableHover.set(kpiName,true)"
                    (mouseleave)="tableHover.clear()"
                    [ngStyle]="{'background':tableHover.get(kpiName)?'#f1f5f9':'#ffffff'}">
                    <td class="py-2" style="vertical-align: top">
                        {{kpiName}}
                    </td>
                    <td class="py-2 text-center" style="vertical-align: top">
                        {{formatThaiDate(appraisalPms.pmsMasfromEvaluationRoundModel.apsPeriodStart)}}
                    </td>
                    <td class="py-2 text-center" style="vertical-align: top">
                        {{formatThaiDate(appraisalPms.pmsMasfromEvaluationRoundModel.apsPeriodEnd)}}
                    </td>
                    <ng-container *ngIf="evaluaterId==evaluateeId&&!complete">
                        <td class="py-2 text-center" style="vertical-align: top">
                            {{kpiScore}}
                        </td>
                    </ng-container>
                    <ng-container *ngIf="evaluaterId!=evaluateeId||complete">
                        <td class="py-2 text-center" style="vertical-align: top">
                            {{kpiScore}}
                        </td>
                        <td class="py-2 text-center" style="vertical-align: top">
                            {{kpiScoreBoss}}
                        </td>
                    </ng-container>
                    <td class="py-2 text-center" style="vertical-align: top">
                        {{kpiGrade}}
                    </td>
                    <td class="py-2 text-center" style="vertical-align: top">
                        <div class="flex justify-center">
                            <button type="button" class="ti-btn rounded-sm" [class]="statusButtonClass(statusType)"
                                (click)="sendCurrentTap.emit('ประเมินผลการปฏิบัติงาน');sendCurrentPart.emit(statusType)"
                                style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;">
                                PMS
                            </button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </ng-container>
</div>