<ng-container *transloco="let t; read: 'admin-dashboard'">
  <app-side-nav-companion-bar>
    <h2 title>
      {{t('title')}}
    </h2>
  </app-side-nav-companion-bar>
  <div class="container-fluid g-0">
    <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav nav-tabs">
      <li *ngFor="let tab of tabs" [ngbNavItem]="tab" class=tab>
        <a ngbNavLink routerLink="." [fragment]="tab.fragment">{{ t(tab.title) }}</a>
        <ng-template ngbNavContent>
          <ng-container *ngIf="tab.fragment === TabID.General">
            <app-manage-settings></app-manage-settings>
          </ng-container>
          <ng-container *ngIf="tab.fragment === TabID.Email">
            <app-manage-email-settings></app-manage-email-settings>
          </ng-container>
          <ng-container *ngIf="tab.fragment === TabID.Media">
            <app-manage-media-settings></app-manage-media-settings>
          </ng-container>
          <ng-container *ngIf="tab.fragment === TabID.Users">
            <app-manage-users></app-manage-users>
          </ng-container>
          <ng-container *ngIf="tab.fragment === TabID.Libraries">
            <app-manage-library></app-manage-library>
          </ng-container>
          <ng-container *ngIf="tab.fragment === TabID.Logs">
            <app-manage-logs></app-manage-logs>
          </ng-container>
          <ng-container *ngIf="tab.fragment === TabID.System">
            <app-manage-system></app-manage-system>
          </ng-container>
          <ng-container *ngIf="tab.fragment === TabID.Statistics">
            <app-server-stats></app-server-stats>
          </ng-container>
          <ng-container *ngIf="tab.fragment === TabID.Tasks">
            <app-manage-tasks-settings></app-manage-tasks-settings>
          </ng-container>
          <ng-container *ngIf="tab.fragment === TabID.KavitaPlus">
            <p>{{t('kavita+-desc-part-1')}} <a href="https://wiki.kavitareader.com/en/kavita-plus" target="_blank" rel="noreferrer nofollow">{{t('kavita+-desc-part-2')}}</a> {{t('kavita+-desc-part-3')}} <a href="https://wiki.kavitareader.com/en/kavita-plus#faq" target="_blank" rel="noreferrer nofollow">FAQ</a></p>
            <app-license></app-license>
          </ng-container>
        </ng-template>
      </li>
    </ul>
    <div [ngbNavOutlet]="nav" class="mt-3 mb-3"></div>

  </div>

</ng-container>
