<div class="font-size-16px font-weight-600 pt-2rem pb-1rem text-primary">
    {{'BusinessUnitDetails' | translate}}
</div>
<div class="page">
    <nav class="flex rtl:space-x-reverse space-x-2">
        <a (click)="onSendPathTitle('Division');currentTab=1"
            class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900 active"
            href="javascript:void(0);" id="card-type-item-1" data-hs-tab="#card-type-1" aria-controls="card-type-1">
            {{'Division' | translate}}
        </a>
        <a (click)="onSendPathTitle('Department');currentTab=2"
            class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
            href="javascript:void(0);" id="card-type-item-2" data-hs-tab="#card-type-2" aria-controls="card-type-2">
            {{'Department' | translate}}
        </a>
        <a (click)="onSendPathTitle('Section');currentTab=3"
            class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
            href="javascript:void(0);" id="card-type-item-3" data-hs-tab="#card-type-3" aria-controls="card-type-3">
            {{'Section' | translate}}
        </a>
        <a (click)="onSendPathTitle('SubSection 1');currentTab=4"
            class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
            href="javascript:void(0);" id="card-type-item-4" data-hs-tab="#card-type-4" aria-controls="card-type-4">
            {{ 'SubSection 1' | translate }}
        </a>
        <a (click)="onSendPathTitle('SubSection 2');currentTab=5"
            class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
            href="javascript:void(0);" id="card-type-item-5" data-hs-tab="#card-type-5" aria-controls="card-type-5">
            {{ 'SubSection 2' | translate }}
        </a>
        <a (click)="onSendPathTitle('SubSection 3');currentTab=6"
            class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
            href="javascript:void(0);" id="card-type-item-6" data-hs-tab="#card-type-6" aria-controls="card-type-6">
            {{ 'SubSection 3' | translate }}
        </a>
        <a (click)="onSendPathTitle('SubSection 4');currentTab=7"
            class="border w-32 justify-center rounded-4px hs-tab-active:!bg-primary hs-tab-active:border-primary hs-tab-active:!text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center text-gray-600 hover:text-gray-900"
            href="javascript:void(0);" id="card-type-item-7" data-hs-tab="#card-type-7" aria-controls="card-type-7">
            {{ 'SubSection 4' | translate }}
        </a>
    </nav>
    <div class="pt-50px">
        <div *ngIf="currentTab==1" id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
            <app-department-register></app-department-register>
        </div>
        <div *ngIf="currentTab==2" id="card-type-2" class="hidden" role="tabpanel" aria-labelledby="card-type-item-2">
            <app-department-list></app-department-list>
        </div>
        <div *ngIf="currentTab==3" id="card-type-3" class="hidden" role="tabpanel" aria-labelledby="card-type-item-3">
            <app-section-registration></app-section-registration>
        </div>
        <div *ngIf="currentTab==4" id="card-type-4" class="hidden" role="tabpanel" aria-labelledby="card-type-item-4">
            <app-sub-department-one></app-sub-department-one>
        </div>
        <div *ngIf="currentTab==5" id="card-type-5" class="hidden" role="tabpanel" aria-labelledby="card-type-item-5">
            <app-sub-department-two></app-sub-department-two>
        </div>
        <div *ngIf="currentTab==6" id="card-type-6" class="hidden" role="tabpanel" aria-labelledby="card-type-item-6">
            <app-sub-department-three></app-sub-department-three>
        </div>
        <div *ngIf="currentTab==7" id="card-type-7" class="hidden" role="tabpanel" aria-labelledby="card-type-item-7">
            <app-sub-department-four></app-sub-department-four>
        </div>
    </div>
</div>