<div class="font-size-16px font-weight-600 pt-2rem pb-1rem text-primary">
    รายละเอียดสาขาและหน่วยธุรกิจ
</div>
<div class="page">
    <nav class="flex rtl:space-x-reverse space-x-2">
        <a (click)="onSendPathTitle('ทะเบียนฝ่าย')"
            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">
            ทะเบียนฝ่าย
        </a>
        <a (click)="onSendPathTitle('ทะเบียนแผนก')"
            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">
            ทะเบียนแผนก
        </a>
        <a (click)="onSendPathTitle('ทะเบียนส่วน')"
            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">
            ทะเบียนส่วน
        </a>
        <a (click)="onSendPathTitle('ส่วนย่อย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"
            href="javascript:void(0);" id="card-type-item-4" data-hs-tab="#card-type-4" aria-controls="card-type-4">
            ส่วนย่อย1
        </a>
        <a (click)="onSendPathTitle('ส่วนย่อย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-5" data-hs-tab="#card-type-5" aria-controls="card-type-5">
            ส่วนย่อย2
        </a>
        <a (click)="onSendPathTitle('ส่วนย่อย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-6" data-hs-tab="#card-type-6" aria-controls="card-type-6">
            ส่วนย่อย3
        </a>
        <a (click)="onSendPathTitle('ส่วนย่อย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-7" data-hs-tab="#card-type-7" aria-controls="card-type-7">
            ส่วนย่อย4
        </a>
    </nav>
    <div class="pt-50px">
        <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
            <app-department-register></app-department-register>
        </div>
        <div id="card-type-2" class="hidden" role="tabpanel" aria-labelledby="card-type-item-2">
            <app-department-list></app-department-list>
        </div>
        <div id="card-type-3" class="hidden" role="tabpanel" aria-labelledby="card-type-item-3">
            <app-section-registration></app-section-registration>
        </div>
        <div id="card-type-4" class="hidden" role="tabpanel" aria-labelledby="card-type-item-4">
            <app-sub-department-one></app-sub-department-one>
        </div>
        <div id="card-type-5" class="hidden" role="tabpanel" aria-labelledby="card-type-item-5">
            <app-sub-department-two></app-sub-department-two>
        </div>
        <div id="card-type-6" class="hidden" role="tabpanel" aria-labelledby="card-type-item-6">
            <app-sub-department-three></app-sub-department-three>
        </div>
        <div 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>