<!-- MARK: - Runs table tabs -->
<nav class="navbar navbar-light bg-light">
   <form class="form-inline">
      <button *ngFor="let tab of this.getMongooseRunTabs() | async" class="btn btn-sm btn-outline-secondary" type="button" (click)="onStatusTabClick(tab)"
         [id]="tab.isSelected ? 'selected-tab' : ''">
         {{ tab.getAmountOfRecords() }}
      </button>
   </form>
</nav>


<div *ngIf="hasSavedRunRecords(); else emptyRecordsAlert">
   <!-- NOTE: Table of Mongoose Run Records with actual information. -->
   <app-runs-table [mongooseRunRecords]="this.getDesiredRecords()" [@slide]="this.displayingRunRecords"></app-runs-table>
</div>


<!-- NOTE: Alert if no Mongoose Run records have been found. -->
<ng-template #emptyRecordsAlert>
   <div class="alert alert-secondary" role="alert">
      No records yet.
   </div>
</ng-template>
<!-- MARK: - Runs table tabs -->
<nav class="navbar navbar-light bg-light">
   <form class="form-inline">
      <button *ngFor="let tab of this.getMongooseRunTabs() | async" class="btn btn-sm btn-outline-secondary" type="button" (click)="onStatusTabClick(tab)"
         [id]="tab.isSelected ? 'selected-tab' : ''">
         {{ tab.getTabTag() }}
      </button>
   </form>
</nav>


<div *ngIf="hasSavedRunRecords(); else emptyRecordsAlert">
   <!-- NOTE: Table of Mongoose Run Records with actual information. -->
   <app-runs-table [mongooseRunRecords]="this.getDesiredRecords()" [@slide]="this.displayingRunRecords"></app-runs-table>
</div>


<!-- NOTE: Alert if no Mongoose Run records have been found. -->
<ng-template #emptyRecordsAlert>
   <div class="alert alert-secondary" role="alert">
      No records yet.
   </div>
</ng-template>
Put back name of the tabs.
Put back name of the tabs.
