<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="header-title-table bg-soft-secondary text-primary">
    <span>ประเมินสมรรถนะ</span>
</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 ['รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','เเผนพัฒนา','PMS','ผลประเมิน','เกรด','สถานะ','สถานะผู้ประเมิน']; 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[
                          ['10001', 'ธนพัต อาชาไชย', 'HRD training Officer', '', '', '', '70', 'c', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่ 1'],
                          ['10002', 'พิชญาภา มหาเมธี', 'HRD training Officer', '', '', '', '-', '-', 'ยังไม่ประเมิน', '-'],
                          ['10003', 'นิรดา บุญเทพ', 'HRD training Officer', '', '', '', '76', '', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่3'],
                          ['10004', 'รัตน์ ธนากร', 'HRD training Officer', '', '', '', '79', '', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่ 1'],
                          ['10005', 'ยศกร ศิริธาดา', 'HRD training Officer', '', '', '', '', '', 'ประเมินเเล้ว', 'ผู้อนุมัติลำดับที่ 2'],
                          ['10006', 'ธนิสรา นพรัตน์พร', 'HRD training Officer', '', '', '', '80', '', 'ประเมินเเล้ว', '-'],
                          ['10007', 'เมริสา สุขทิพย์', 'HRD training Officer', '', '', '', '', '', 'ประเมินเเล้ว', '-']];let i = index">
                        <td class="text-center" style="font-size: 12px; width: 150px;">{{item[0]}}</td>
                        <td style="font-size: 12px; width: 175px;">{{item[1]}}</td>
                        <td style="font-size: 12px;">{{item[2]}}</td>
                        <td class="flex justify-center">
                            <button type="button" class="ti-btn rounded-sm ti-btn-secondary"
                                style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;" (click)="returnPage('c')">
                                CC
                            </button>
                            <button type="button" class="ti-btn rounded-sm ti-btn-warning"
                                style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;" (click)="returnPage('c')">
                                MC
                            </button>
                            <button type="button" class="ti-btn rounded-sm ti-btn-success"
                                style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;" (click)="returnPage('c')">
                                PC
                            </button>
                        </td>
                        <td style="width: 160px; text-align: center; vertical-align: middle;">
                            <button type="button" class="ti-btn rounded-sm soft-dark text-white text-center"
                                style="height: 15px; width: 45px; font-size: 12px;" (click)="returnPage('idp')">
                                IDP
                            </button>
                        </td>
                        <td class="text-center">
                            <button type="button" class="ti-btn rounded-sm ti-btn-success"
                                style="height: 15px; width: 55px; font-size: 12px; display: flex; align-items: center; justify-content: center;" (click)="returnPage('pms')">
                                ประเมิน
                            </button>
                        </td>
                        <td class="text-center" style="font-size: 12px;">{{item[6]}}</td>
                        <td class="text-center" style="font-size: 12px;">{{item[7]}}</td>
                        <td class="text-center" style="font-size: 12px;">{{item[8]}}</td>
                        <td class="text-center" style="font-size: 12px;">{{item[9]}}</td>

                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>