<h4 class="mb-4 fw-bold">Kelola Data</h4>

<div class="rounded-3 p-4 bg-white">
  <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
    <li class="nav-item" [ngbNavItem]="1">
      <button class="nav-link text-black fw-bolder" ngbNavLink>
        FAQ
        <span>
          <div
            class="dataLength text-primary ms-2 fw-normal d-inline-flex align-items-center justify-content-center"
            style="width: 40px; border-radius: 40px"
            [ngStyle]="{ background: active === 1 ? '#DEE1FD' : '' }"
          >
            {{ dataLengthFaq }}
          </div>
        </span>
      </button>
      <ng-template ngbNavContent>
        <app-faq></app-faq>
      </ng-template>
    </li>
    <li [ngbNavItem]="2">
      <button class="nav-link text-black fw-bolder" ngbNavLink>
        Pengelola Jalan
        <span>
          <div
            class="dataLength text-primary ms-2 fw-normal d-inline-flex align-items-center justify-content-center"
            style="width: 40px; border-radius: 40px"
            [ngStyle]="{ background: active === 2 ? '#DEE1FD' : '' }"
          >
            {{ dataLengthPengelola }}
          </div>
        </span>
      </button>
      <ng-template ngbNavContent>
        <app-pengelola></app-pengelola>
      </ng-template>
    </li>
    <li [ngbNavItem]="3">
      <button class="nav-link text-black fw-bolder" ngbNavLink>
        Surveyor Jalan
        <span>
          <div
            class="dataLength text-primary ms-2 fw-normal d-inline-flex align-items-center justify-content-center"
            style="width: 40px; border-radius: 40px"
            [ngStyle]="{ background: active === 3 ? '#DEE1FD' : '' }"
          >
            {{ dataLengthSurveyor }}
          </div>
        </span>
      </button>
      <ng-template ngbNavContent>
        <app-surveyor></app-surveyor>
      </ng-template>
    </li>
  </ul>

  <div [ngbNavOutlet]="nav" class="mt-2"></div>
</div>
