<div fxLayout="column" class="mb-2">
  <div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
    <fa-icon class="page-title-img mr-1" [icon]="faMapSigns" />
    <span class="page-title">Routing</span>
  </div>
  <div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap-x">
    <mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
      <mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
        <div fxLayout="row" fxFlex="100">
          <nav mat-tab-nav-bar mat-stretch-tabs="false" mat-align-tabs="start" fxFlex="100" [tabPanel]="tabPanel">
            <div *ngFor="let link of links" tabindex="1" mat-tab-link role="tab" class="mat-tab-label" [active]="activeLink === link.link" routerLink="{{link.link}}" (click)="activeLink = link.link">{{link.name}}</div>
          </nav>
          <mat-tab-nav-panel #tabPanel />    
        </div>
        <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="padding-gap-x-large">
          <router-outlet />
        </div>
      </mat-card-content>
    </mat-card>
  </div>
</div>
