<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">
        {{'menu.CompetencyManage' | translate}}
    </div>
    <div class="page pt-0.75rem">
        <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="font-size-16px font-weight-500  hs-tab-active:font-weight-700 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  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 = ['CompetencySystem', 'menu.CompetencyManage','BIsAndCDR']">
                    {{'BIsAndCDR' | translate}}
                </a>
                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 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  hover:text-secondary"
                    href="javascript:void(0);" id="underline-item-2" data-hs-tab="#underline-2"
                    aria-controls="underline-2"
                    (click)="currentPath = 2;pathTitle = ['CompetencySystem', 'menu.CompetencyManage','CompetencyMapping']">
                    {{'CompetencyMapping' | translate}}
                </a>
                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 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  hover:text-secondary"
                    href="javascript:void(0);" id="underline-item-3" data-hs-tab="#underline-3"
                    aria-controls="underline-3"
                    (click)="currentPath = 3;pathTitle = ['CompetencySystem', 'menu.CompetencyManage','AssignApprover']">
                    {{'AssignApprover' | 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-indicators-and-curriculum (sendPathTitle)="pathTitle=$event"></app-indicators-and-curriculum>
            </div>
            <div *ngIf="currentPath==2" id="underline-2" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-2">
                <app-group-competencies (sendPathTitle)="pathTitle=$event"></app-group-competencies>
            </div>
            <div *ngIf="currentPath==3" id="underline-3" class="hidden" role="tabpanel"
                aria-labelledby="underline-item-3">
                <app-set-approvers></app-set-approvers>
            </div>
        </div>
    </div>
</div>