<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">
        การจัดการสมรรถนะ
    </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: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)="activeTab='underline-1';pathTitle = ['การประเมินสมรรถนะ','การจัดการสมรรถนะ','ตัวชี้วัดเเละหลักสูตร']">
                    ตัวชี้วัดเเละหลักสูตร
                </a>
                <a class="text-base font-medium 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"
                    href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
                    aria-controls="underline-2"
                    (click)="activeTab='underline-2';pathTitle = ['การประเมินสมรรถนะ','การจัดการสมรรถนะ','จัดกลุ่มสมรรถนะ']">
                    จัดกลุ่มสมรรถนะ
                </a>
                <a class="text-base font-medium 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"
                    href="javascript:void(0);" id="underline-item-3" data-hs-tab="#underline-3"
                    aria-controls="underline-3"
                    (click)="activeTab='underline-3';pathTitle = ['การประเมินสมรรถนะ','การจัดการสมรรถนะ','กำหนดผู้อนุมัติ']">
                    กำหนดผู้อนุมัติ
                </a>
            </nav>
        </div>
        <div class="mt-3 px-3rem">
            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1"
                *ngIf="activeTab === 'underline-1'">
                <app-indicators-and-curriculum *ngIf="groupShow=='1'" [pathTitle]="pathTitle"
                    (sendPathTitle)="pathTitle=$event"
                    (sendGroupShow)="groupShow=$event"></app-indicators-and-curriculum>
                <app-edit-group-indicators *ngIf="groupShow=='2'" [pathTitle]="pathTitle"
                    (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-edit-group-indicators>
            </div>
            <div id="underline-2" role="tabpanel" aria-labelledby="underline-item-2"
                *ngIf="activeTab === 'underline-2'">
                <app-group-competencies *ngIf="groupShow=='1'" [pathTitle]="pathTitle"
                    (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-group-competencies>
                <app-edit-group-competencies *ngIf="groupShow=='2'" [pathTitle]="pathTitle"
                    (sendPathTitle)="pathTitle=$event" (sendGroupShow)="groupShow=$event"></app-edit-group-competencies>
            </div>
            <div id="underline-3" role="tabpanel" aria-labelledby="underline-item-3"
                *ngIf="activeTab === 'underline-3'">
                <!-- เนื้อหาของ Tab 3 -->
            </div>
        </div>
    </div>
</div>