<div class="container">
  <h2>Admin Dashboard</h2>

  <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs nav-pills">
      <li *ngFor="let tab of tabs" [ngbNavItem]="tab">
        <a ngbNavLink routerLink="." [fragment]="tab.fragment">{{ tab.title | sentenceCase }}</a>
        <ng-template ngbNavContent>
          <ng-container *ngIf="tab.fragment === ''">
            <app-manage-settings></app-manage-settings>
          </ng-container>
          <ng-container *ngIf="tab.fragment === 'users'">
              <app-manage-users></app-manage-users>
          </ng-container>
          <ng-container *ngIf="tab.fragment === 'libraries'">
              <app-manage-library></app-manage-library>
          </ng-container>
          <ng-container *ngIf="tab.fragment === 'system'">
            <app-manage-system></app-manage-system>
          </ng-container>
          <ng-container *ngIf="tab.fragment === 'changelog'">
            <app-changelog></app-changelog>
        </ng-container>
        </ng-template>
      </li>
  </ul>
  <div [ngbNavOutlet]="nav" class="mt-3"></div>

</div>