<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 text-primary px-8">
        {{'menu.JobDescription' | translate}}
    </div>
    <div class="page">
        <div class="border-b border-gray-200 dark:border-white/10 px-8">
            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
                <a 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)="currentPath = 1;pathTitle = ['menu.Organization','menu.JobDescription','EmployeeGroup']">
                    {{'EmployeeGroup' | translate}}
                </a>
                <a 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)="currentPath = 2;pathTitle = ['menu.Organization','menu.JobDescription','Position']">
                    {{'Position' | translate}}
                </a>
                <!-- <a 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)="currentPath = 3;pathTitle = ['menu.Organization','menu.JobDescription','ลักษณะงาน']">
                    ลักษณะงาน
                </a> -->
                <a 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)="currentPath = 4;pathTitle = ['menu.Organization','menu.JobDescription','EmploymentType']">
                    {{'EmploymentType' | translate}}
                </a>
                <a 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)="currentPath = 5;pathTitle = ['menu.Organization','menu.JobDescription','JobLevelJL']">
                    {{'JobLevelJL' | translate}}
                </a>
                <a 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)="currentPath = 6;pathTitle = ['menu.Organization','menu.JobDescription','JobFamily']">
                    {{'JobFamily' | translate}}
                </a>
                <a 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-7" data-hs-tab="#underline-7"
                    aria-controls="underline-7"
                    (click)="currentPath = 7;pathTitle = ['menu.Organization','menu.JobDescription','JobGradeGroup']">
                    {{'JobGradeGroup' | translate}}
                </a>
                <a 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-8" data-hs-tab="#underline-8"
                    aria-controls="underline-8"
                    (click)="currentPath = 8;pathTitle = ['menu.Organization','menu.JobDescription','JobGrade']">
                    {{'JobGrade' | translate}}
                </a>
            </nav>
        </div>
        <div class="mt-3 px-2rem !-mt-3 pt-50px">
            <div *ngIf="currentPath == 1" id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
                <app-employee-group-unit></app-employee-group-unit>
            </div>
            <div *ngIf="currentPath == 2" id="underline-2" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-2">
                <app-position-unit></app-position-unit>
            </div>
            <div *ngIf="currentPath == 3" id="underline-3" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-3">
                ลักษณะงาน
            </div>
            <div *ngIf="currentPath == 4" id="underline-4" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-4">
                <app-employee-categories></app-employee-categories>
            </div>
            <div *ngIf="currentPath == 5" id="underline-5" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-5">
                <app-employee-level></app-employee-level>
            </div>
            <div *ngIf="currentPath == 6" id="underline-6" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-6">
                <app-job-family></app-job-family>
            </div>
            <div *ngIf="currentPath == 7" id="underline-7" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-7">
                <app-job-grade-group></app-job-grade-group>
            </div>
            <div *ngIf="currentPath == 8" id="underline-8" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-8">
                <app-job-grade></app-job-grade>
            </div>
        </div>
    </div>
</div>