<pngx-page-header title="Logs" i18n-title>

</pngx-page-header>

<ul ngbNav #nav="ngbNav" [(activeId)]="activeLog" (activeIdChange)="reloadLogs()" class="nav-tabs">
  <li *ngFor="let logFile of logFiles" [ngbNavItem]="logFile">
    <a ngbNavLink>{{logFile}}.log</a>
  </li>
  <div *ngIf="isLoading && !logFiles.length" class="pb-2">
    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
    <ng-container i18n>Loading...</ng-container>
  </div>
</ul>

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

<div class="bg-dark p-3 text-light font-monospace log-container" #logContainer>
  <div *ngIf="isLoading && logFiles.length">
    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
    <ng-container i18n>Loading...</ng-container>
  </div>
  <p
    class="m-0 p-0 log-entry-{{getLogLevel(log)}}"
    *ngFor="let log of logs">{{log}}</p>
</div>
