<br/>
<div style="max-width: 1100px; margin: 0 auto 18px; padding-left: 10px; padding-right: 10px;">

<mat-toolbar color="primary" style="border-top-left-radius: 6px; border-top-right-radius: 6px;">
  <span class="mat-body-strong ellipsis">P3X Angular HTTP Cache Interceptor v{{ version }}</span>
</mat-toolbar>

  <nav mat-tab-nav-bar [tabPanel]="tabPanel"  backgroundColor="primary" color="accent">
    @for (link of navLinks; track link) {
      <a mat-tab-link
        [routerLink]="link.link"
        routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        {{link.label}}
      </a>
    }
  </nav>

  <mat-tab-nav-panel #tabPanel>
    <mat-card style=" border-top-left-radius: 0px; border-top-right-radius: 0px; padding-top: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;">
      <div style="text-align: center;">
        <a class="link-fix" mat-button color="accent" href="https://corifeus.com/angular-http-cache-interceptor" target="_blank">Corifeus P3X Angular HTTP Cache Interceptor</a>
      </div>
      <mat-divider></mat-divider>
      <div style="text-align: center;">
        <a class="link-fix" mat-button color="accent" href="https://github.com/patrikx3/angular-http-cache-interceptor" target="_blank">GitHub</a>
      </div>
      <mat-divider></mat-divider>
      <div style="text-align: center;">
        <a class="link-fix" mat-button color="accent" href="https://www.npmjs.com/package/p3x-angular-http-cache-interceptor" target="_blank">NpmJS</a>
      </div>
      <mat-divider></mat-divider>
      <br/>
      <div style="margin: 10px;">
        <router-outlet></router-outlet>
      </div>
    </mat-card>

  </mat-tab-nav-panel>
  <br/>
</div>