<div class="relative">
    <div class="flex relative  before:absolute before:w-full before:h-full bg-gradient-custom"
        style="margin-top: -50px;margin-left: -100px;margin-right: -100px">
        <div class="h-[500px] w-full rounded-sm"></div>
    </div>
    <div class="main-content " style="margin-top:-29rem">
        <div class="grid grid-cols-12 gap-x-6">
            <div class="col-span-12 xxl:col-span-2">
            </div>
            <div class="col-span-12 xxl:col-span-8">
                <div class="box" style="border-radius:20px">
                    <div class="box-header">
                        <div class="grid grid-cols-12 gap-x-6 mb-3 mt-3">
                              <div class="absolute">
                                <button type="button" class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0  "
                                    style="border-radius:20px" routerLink="/ess/employee-self-service">
                                    <i class="ti ti-chevron-left"></i>
                                    {{'Back' | translate}}
                                </button>
                            </div>
                            <div class="col-span-12">
                                <h5 class="box-title mb-3 text-center">ใบกำหนดหน้าที่ (JOB DESCRIPTION) </h5>
                            </div>
                            <div class="col-span-4 mt-3 mb-3 text-center">
                                จัดทำเมื่อ : {{(empDetail.data.createDate | date:'dd/MM/yyyy') || '-'}}
                            </div>
                            <div class="col-span-4 mt-3 mb-3 text-center">
                                วันที่แก้ไข : {{(empDetail.data.editDate | date:'dd/MM/yyyy') || '-'}}
                            </div>
                            <div class="col-span-4 mt-3 mb-3 text-center">
                                Job Code:
                                {{empDetail.data.jobcodeId}}
                            </div>
                        </div>
                        <nav class="sm:flex sm:space-x-2 space-y-2 sm:space-y-0 rtl:space-x-reverse block"
                            aria-label="Tabs" role="tablist">
                            <button type="button" style="border-radius:20px"
                                class="hs-tab-active:text-white hs-tab-active:bg-primary hs-tab-active:border-primary py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700  active"
                                id="part-item-1" data-hs-tab="#part-1" aria-controls="part-1" role="tab">
                                {{'Part 1 : General Information' | translate}}
                            </button>
                            <button type="button" style="border-radius:20px"
                                class="hs-tab-active:text-white hs-tab-active:bg-primary hs-tab-active:border-primary py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700  "
                                id="part-item-2" data-hs-tab="#part-2" aria-controls="part-2" role="tab">
                                {{'Part 2 : Organization Chart' | translate}}
                            </button>
                            <button type="button" style="border-radius:20px"
                                class="hs-tab-active:text-white hs-tab-active:bg-primary hs-tab-active:border-primary py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700  "
                                id="part-item-3" data-hs-tab="#part-3" aria-controls="part-3" role="tab">
                                {{'Part 3 : Job Detail' | translate}}
                            </button>
                            <button type="button" style="border-radius:20px"
                                class="hs-tab-active:text-white hs-tab-active:bg-primary hs-tab-active:border-primary py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700  "
                                id="part-item-4" data-hs-tab="#part-4" aria-controls="part-4" role="tab">
                                {{'Part 4 : Job Specification' | translate}}
                            </button>
                            <button type="button" style="border-radius:20px"
                                class="hs-tab-active:text-white hs-tab-active:bg-primary hs-tab-active:border-primary py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700  "
                                id="part-item-5" data-hs-tab="#part-5" aria-controls="part-5" role="tab">
                                {{'Part 5 : Job Competency' | translate}}
                            </button>
                            <button type="button" style="border-radius:20px"
                                class="hs-tab-active:text-white hs-tab-active:bg-primary hs-tab-active:border-primary py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700  "
                                id="part-item-6" data-hs-tab="#part-6" aria-controls="part-6" role="tab">
                                {{'Part 6 : Key Performance Indicators: KPIs' | translate}}
                            </button>
                        </nav>
                    </div>
                    <div class="box-body">
                        <div id="part-1" class="" role="tabpanel" aria-labelledby="part-item-1">
                            <ng-container *ngTemplateOutlet="part1"></ng-container>
                        </div>
                        <div id="part-2" class="hidden" role="tabpanel" aria-labelledby="part-item-2">
                            <ng-container *ngTemplateOutlet="part2"></ng-container>
                        </div>
                        <div id="part-3" class="hidden" role="tabpanel" aria-labelledby="part-item-3">
                            <ng-container *ngTemplateOutlet="part3"></ng-container>
                        </div>
                        <div id="part-4" class="hidden" role="tabpanel" aria-labelledby="part-item-4">
                            <ng-container *ngTemplateOutlet="part4"></ng-container>
                        </div>
                        <div id="part-5" class="hidden" role="tabpanel" aria-labelledby="part-item-5">
                            <ng-container *ngTemplateOutlet="part5"></ng-container>
                        </div>
                        <div id="part-6" class="hidden" role="tabpanel" aria-labelledby="part-item-6">
                            <ng-container *ngTemplateOutlet="part6"></ng-container>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-span-12 xxl:col-span-2">
            </div>
        </div>
    </div>
</div>
<!-- <app-page-header [pathTitle]="pathTitle"></app-page-header>
<div class="bg-card-white">
</div>
<div class="block-main-content">
    <div class="text-lg font-bold py-2 px-8 text-primary">
        {{'ข้อมูลลักษณะงาน (JD)' |translate}}
    </div>
    <div class="page">
        <div class="border-b border-gray-200 px-8">
            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
                <a style="white-space: normal;align-items:start;"
                    class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary active"
                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
                    aria-controls="underline-1" (click)="currentPage=1">
                    {{'Part 1 : General Information' | translate}}
                </a>
                <a style="white-space: normal;align-items:start;"
                    class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                    href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
                    aria-controls="underline-2" (click)="currentPage=2">
                    {{'Part 2 : Organization Chart' | translate}}
                </a>
                <a style="white-space: normal;align-items:start;"
                    class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                    href="javascript:void(0);" id="underline-item-3" data-hs-tab="#underline-3"
                    aria-controls="underline-3" (click)="currentPage=3">
                    {{'Part 3 : Job Detail' | translate}}
                </a>
                <a style="white-space: normal;align-items:start;"
                    class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                    href="javascript:void(0);" id="underline-item-4" data-hs-tab="#underline-4"
                    aria-controls="underline-4" (click)="currentPage=4">
                    {{'Part 4 : Job Specification' | translate}}
                </a>
                <a style="white-space: normal;align-items:start;"
                    class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                    href="javascript:void(0);" id="underline-item-5" data-hs-tab="#underline-5"
                    aria-controls="underline-5" (click)="currentPage=5">
                    {{'Part 5 : Job Competency' | translate}}
                </a>
                <a style="white-space: normal;align-items:start;"
                    class="text-base font-medium hs-tab-active:text-lg hs-tab-active:font-bold hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 px-1 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  dark:text-white/70 hover:text-secondary"
                    href="javascript:void(0);" id="underline-item-6" data-hs-tab="#underline-6"
                    aria-controls="underline-6" (click)="currentPage=6">
                    {{'Part 6 : Key Performance Indicators: KPIs' | translate}}
                </a>
            </nav>
        </div>
        <div class="mt-3 px-2rem !-mt-3 pt-50px">
            <div *ngIf="currentPage==1" id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
                <div class="w-full text-center" *ngIf="empDetail.loading">
                    <div *ngFor=" let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
                        aria-label="loading">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
                <ng-container *ngIf="!empDetail.loading">
                    <ng-container *ngTemplateOutlet="part1"></ng-container>
                </ng-container>
            </div>
            <div *ngIf="currentPage==2" id="underline-2" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-2">
                <div class="w-full text-center" *ngIf="empDetail.loading">
                    <div *ngFor=" let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
                        aria-label="loading">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
                <ng-container *ngIf="!empDetail.loading">
                    <ng-container *ngTemplateOutlet="part2"></ng-container>
                </ng-container>
            </div>
            <div *ngIf="currentPage==3" id="underline-3" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-3">
                <div class="w-full text-center" *ngIf="empDetail.loading">
                    <div *ngFor=" let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
                        aria-label="loading">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
                <ng-container *ngIf="!empDetail.loading">
                    <ng-container *ngTemplateOutlet="part3"></ng-container>
                </ng-container>
            </div>
            <div *ngIf="currentPage==4" id="underline-4" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-4">
                <div class="w-full text-center" *ngIf="empDetail.loading">
                    <div *ngFor=" let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
                        aria-label="loading">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
                <ng-container *ngIf="!empDetail.loading">
                    <ng-container *ngTemplateOutlet="part4"></ng-container>
                </ng-container>
            </div>
            <div *ngIf="currentPage==5" id="underline-5" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-5">
                <div class="w-full text-center" *ngIf="empDetail.loading">
                    <div *ngFor=" let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
                        aria-label="loading">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
                <ng-container *ngIf="!empDetail.loading">
                    <ng-container *ngTemplateOutlet="part5"></ng-container>
                </ng-container>
            </div>
            <div *ngIf="currentPage==6" id="underline-6" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-6">
                <div class="w-full text-center" *ngIf="empDetail.loading">
                    <div *ngFor=" let item of [1,2,3]" class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
                        aria-label="loading">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
                <ng-container *ngIf="!empDetail.loading">
                    <ng-container *ngTemplateOutlet="part6"></ng-container>
                </ng-container>
            </div>
        </div>
    </div>
</div> -->


<ng-template #part1>
    <div class="p-2 pt-0">
        <div class="overflow-auto w-1/2 mb-3">
            <table class="ti-custom-table border-0 whitespace-nowrap">
                <tbody>
                    <tr>
                        <td class="!p-2 font-medium !text-gray-500">
                            ตำแหน่ง (ภาษาไทย)
                        </td>
                        <td class="!p-2">:</td>
                        <td class="!p-2 !text-gray-500">
                            {{empDetail.data.position.tdesc}}
                        </td>
                    </tr>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            ตำแหน่ง (ภาษาอังกฤษ)
                        </td>
                        <td class="!p-2">:</td>
                        <td class="!p-2 !text-gray-500">
                            {{empDetail.data.position.edesc}}
                        </td>
                    </tr>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            ระดับงาน (Job Grade)
                        </td>
                        <td class="!p-2">:</td>
                        <td class="!p-2 !text-gray-500">
                            {{empDetail.data.jl.tdesc}}
                        </td>
                    </tr>
                    <!-- <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            งาน (Unit)
                        </td>
                        <td class="!p-2">:</td>
                        <td class="!p-2 !text-gray-500">
                            ???
                        </td>
                    </tr> -->
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            แผนก (Section)
                        </td>
                        <td class="!p-2">:</td>
                        <td class="!p-2 !text-gray-500">
                            {{empDetail.data.bu2.edesc}}
                        </td>
                    </tr>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            ส่วน (Division)
                        </td>
                        <td class="!p-2">:</td>
                        <td class="!p-2 !text-gray-500">
                            {{empDetail.data.bu3.edesc}}
                        </td>
                    </tr>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            ฝ่าย (Department)
                        </td>
                        <td class="!p-2">:</td>
                        <td class="!p-2 !text-gray-500">
                            {{empDetail.data.bu1.edesc}}
                        </td>
                    </tr>
                    <!-- <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            สายงาน (Business Line)
                        </td>
                        <td class="!p-2">:</td>
                        <td class="!p-2 !text-gray-500">
                            ???
                        </td>
                    </tr> -->
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            ตำแหน่งผู้บังคับบัญชา
                        </td>
                        <td class="!p-2">:</td>
                        <td class="!p-2 !text-gray-500">
                            {{empDetail.data.supervisorJobCode.tdesc}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h5 class="box-title mt-3 mb-3">วัตถุประสงค์ของตำแหน่งงาน (Objective) </h5>
        <div class="overflow-auto w-1/2 mb-3">
            <table class="ti-custom-table border-0 whitespace-nowrap">
                <tbody>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            {{empDetail.data.jobObjective}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</ng-template>
<ng-template #part2>
    <div class="p-2 py-0 grid">
        <div class="col-span-1 grid" style="align-items: center; justify-items: center">
            <h5 class="box-title mb-1 text-center w-full" style="align-items: center; justify-items: center;">
                ชื่อตำแหน่งผู้บังคับบัญชาโดยตรง
            </h5>
        </div>
        <div class="col-span-1 grid" style="align-items: center; justify-items: center">
            <h5 class="box-title  text-center w-full" style="align-items: center; justify-items: center;">
                <div class="!text-gray-500" style="border: 2px solid;width: 500px;padding: 20px;">
                    {{empDetail.data.supervisorJobCode.tdesc}}
                </div>
            </h5>
        </div>
        <div class="col-span-1 grid" style="align-items: center; justify-items: center">
            <div style="width:2px; height:50px; background-color:#000;"></div>
        </div>
        <div class="col-span-1 grid" style="align-items: center; justify-items: center">
            <h5 class="box-title mt-1 mb-1  text-center w-full" style="align-items: center; justify-items: center;">
                ชื่อตำแหน่งของผู้ปฏิบัติงาน
            </h5>
        </div>
        <div class="col-span-1 grid" style="align-items: center; justify-items: center">
            <h5 class="box-title  text-center w-full" style="align-items: center; justify-items: center;">
                <div class="!text-gray-500" style="border: 2px solid;width: 500px;padding: 20px;">
                    {{empDetail.data.position.tdesc}}
                </div>
            </h5>
        </div>
        <div class="col-span-1 grid" style="align-items: center; justify-items: center">
            <div style="width:2px; height:50px; background-color:#000;"></div>
        </div>
        <div class="col-span-1 grid" style="align-items: center; justify-items: center">
            <h5 class="box-title mt-1 mb-1  text-center w-full" style="align-items: center; justify-items: center;">
                ชื่อตำแหน่งและจำนวนผู้ใต้บังคับบัญชาโดยตรง
            </h5>
        </div>
        <div class="col-span-1 grid" style="align-items: center; justify-items: center">
            <h5 class="box-title  text-center w-full" style="align-items: center; justify-items: center;">
                <div style="border: 2px solid;width: auto;padding: 20px;">
                    <table class="ti-custom-table ti-custom-table-head">
                        <tbody>
                            <tr class="!text-gray-500" style="align-items: start"
                                *ngFor="let item of empDetail.data.positionInJob; let i=index">
                                <td style="vertical-align: top;" class="!pr-0">
                                    {{i+1}}. ตำแหน่ง&nbsp;:&nbsp;
                                </td>
                                <td style="vertical-align: top;" class="text-start !pl-0">
                                    {{item.position.tdesc}}
                                </td>
                                <td class="!pr-0">
                                    จำนวน
                                </td>
                                <td class="!text-end">
                                    &nbsp;{{item.countPosition}}&nbsp;
                                </td>
                                <td class="!pl-0">
                                    คน
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </h5>
        </div>
    </div>
</ng-template>
<ng-template #part3>
    <div class="p-2 pt-0">
        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
            <thead>
                <tr>
                    <th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
                        <span class="font-size-12px font-weight-700">งานหลัก (Major Responsibility)</span>
                    </th>
                    <th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
                        <span class="font-size-12px font-weight-700">รายละเอียด (Job Detail)</span>
                    </th>
                    <th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
                        <span class="font-size-12px font-weight-700">เปอร์เซ็นต์น้ำหนัก (%)</span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr style="align-items: start">
                    <td style="vertical-align: top;" class="text-center">
                        1.งานบริหาร (Management)
                    </td>
                    <td style="vertical-align: top;" class="text-center">
                        {{empDetail.data.serviceWorkText}}
                    </td>
                    <td class="text-center">
                        {{empDetail.data.serviceWorkPercent}}
                    </td>
                </tr>
                <tr style="align-items: start">
                    <td style="vertical-align: top;" class="text-center">
                        2.งานที่รับผิดชอบ (งานปฏิบัติ)
                    </td>
                    <td style="vertical-align: top;" class="text-center">
                        {{empDetail.data.responsibleWorkText}}
                    </td>
                    <td class="text-center">
                        {{empDetail.data.responsibleWorkPercent}}
                    </td>
                </tr>
                <tr style="align-items: start">
                    <td style="vertical-align: top;" class="text-center">
                        3.งานที่ได้รับมอบหมายพิเศษ
                    </td>
                    <td style="vertical-align: top;" class="text-center">
                        {{empDetail.data.specialWorkText}}
                    </td>
                    <td class="text-center">
                        {{empDetail.data.specialWorkPercent}}
                    </td>
                </tr>
                <tr style="align-items: start">
                    <td style="vertical-align: top;" class="text-center">
                        4.งานที่ทุกตำแหน่งต้องปฏิบัต
                    </td>
                    <td style="vertical-align: top;" class="text-center">
                        {{empDetail.data.allPositionWorkText}}
                    </td>
                    <td class="text-center">
                        {{empDetail.data.allPositionWorkPercent}}
                    </td>
                </tr>
                <tr style="align-items: start">
                    <td style="vertical-align: top;" class="text-center">
                        5.อื่นๆ
                    </td>
                    <td style="vertical-align: top;" class="text-center">
                        {{empDetail.data.otherWorkText}}
                    </td>
                    <td class="text-center">
                        {{empDetail.data.otherWorkPercent}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</ng-template>
<ng-template #part4>
    <div class="p-2 pt-0">
        <h5 class="box-title mb-3">การศึกษา/ประสบการณ์ (Education/Experience)</h5>
        <div class="overflow-auto w-1/2 mb-3">
            <table class="ti-custom-table border-0 whitespace-nowrap">
                <tbody>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            {{empDetail.data.educationExperienceText}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h5 class="box-title mb-3">ใบประกาศนียบัตร (Certificate) /ใบประกอบวิชาชีพ (Licensed Professional)</h5>
        <div class="overflow-auto w-1/2 mb-3">
            <table class="ti-custom-table border-0 whitespace-nowrap">
                <tbody>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            {{empDetail.data.cerLicensedText}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h5 class="box-title mb-3">การฝึกอบรมที่จำเป็นต่อการปฏิบัติงาน (Especially Training Course)
        </h5>
        <div class="overflow-auto w-1/2 mb-3">
            <table class="ti-custom-table border-0 whitespace-nowrap">
                <tbody>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            {{empDetail.data.especiallyTrainingText}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h5 class="box-title mb-3">ความสามารถอื่นๆ (Other Abilities)
        </h5>
        <div class="overflow-auto w-1/2 mb-3">
            <table class="ti-custom-table border-0 whitespace-nowrap">
                <tbody>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            {{empDetail.data.otherAbilitiesText}}
                        </td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
</ng-template>
<ng-template #part5>
    <div class="p-2 pt-0">
        <div class="overflow-auto w-1/2 mb-3">
            <table class="ti-custom-table border-0 whitespace-nowrap">
                <tbody>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            {{empDetail.data.competencyWorkText}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</ng-template>
<ng-template #part6>
    <div class="p-2 pt-0">
        <div class="overflow-auto w-1/2 mb-3">
            <table class="ti-custom-table border-0 whitespace-nowrap">
                <tbody>
                    <tr class="!border-0">
                        <td class="!p-2 font-medium !text-gray-500">
                            {{empDetail.data.kpiWorkText}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</ng-template>