<ng-container *ngIf="pageEvalution==''">
    <app-page-header [pathTitle]="pathTitle"></app-page-header>
    <div class="bg-card-white">
    </div>
    <div class="block-main-content">
        <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
            ประเมินผลประจำปี {{currentDate.getFullYear()}}
        </div>
        <div class="pt-50px px-2rem pb-2rem">
            <div class="header-title-type p-0">
                <div class="flex justify-end">
                    <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="Search by No. or Name" style="height: 40px;">
                            <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 class="px-1">
                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-10 m-0 shadow-md">
                            <i class="ti ti-book fs-l"></i>
                            Help
                        </button>
                    </div>
                </div>
            </div>
            <div class="w-full min-height-50px justify-between items-center py-2">
                <div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
                    ประเมินสมรรถนะ
                </div>
            </div>
            <div class="overflow-auto table-bordered rounded-t-md">
                <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
                    <div class="overflow-auto shadow-md">
                        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
                            <thead>
                                <tr>
                                    <ng-container
                                        *ngFor="let item of ['รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','เเผนพัฒนา','ผลประเมิน','เกรด','สถานะ','สถานะผู้ประเมิน']; let f = first; let l = last; let i = index">
                                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
                                            [class.!text-center]="f||l||'ประเมิน'||'เเผนพัฒนา'||'PMS'">
                                            <span class="text-sm">{{ item }}</span>
                                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0"
                                                *ngIf="!l&&!f&&!i">
                                                <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
                                                    width="50" height="16" fill="currentColor" viewBox="0 0 16 16">
                                                    <path
                                                        d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
                                                    </path>
                                                </svg>
                                            </div>
                                        </th>
                                    </ng-container>
                                </tr>
                            </thead>
                            <tbody>
                                <tr *ngFor="let item of subordinateFilter();let i = index">
                                    <td class="text-center" style="font-size: 12px; width: 150px;">
                                        {{item.apsassessy.employeeId}}
                                    </td>
                                    <td style="font-size: 12px; width: 175px;">
                                        {{item.apsassessy.thFullName}}
                                    </td>
                                    <td style="font-size: 12px;">{{item.apsassessy.position.tdesc}}</td>
                                    <td class="text-center">
                                        <button type="button" class="ti-btn rounded-sm ti-btn-soft-success"
                                            style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
                                            (click)="selectSubordinate(item);pageEvalution='evaluation'">
                                            ประเมิน
                                        </button>
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="ti-btn rounded-sm ti-btn-soft-dark"
                                            style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;">
                                            IDP
                                        </button>
                                    </td>
                                    <td class="text-center" style="font-size: 12px;">{{item.sumScore}}</td>
                                    <td class="text-center" style="font-size: 12px;">{{item.gread}}</td>
                                    <td class="text-center" style="font-size: 12px;">{{item.masfromStatusType.tdesc}}
                                    </td>
                                    <td class="text-center" style="font-size: 12px;">{{item.apsapproveType.tdesc}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</ng-container>

<ng-container *ngIf="pageEvalution=='idp'">
    <app-idp-evalution (sendPageEvalution)="pageEvalution=$event"></app-idp-evalution>
</ng-container>
<ng-container *ngIf="pageEvalution=='pms'">
    <app-pms-evalution (sendPageEvalution)="pageEvalution=$event"></app-pms-evalution>
</ng-container>
<ng-container *ngIf="pageEvalution=='evaluation'&&subordinate.select.apsassessy.employeeId">
    <app-self-evaluation [byBoss]="true" [pathTitle]="pathTitle" (sendPageEvalution)="pageEvalution=$event"
        (sendPathTitle)="pathTitle=$event"
        [employeeId]="subordinate.select.apsassessy.employeeId"></app-self-evaluation>
</ng-container>