<div fxLayout="column">
  <div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-title-container">
    <fa-icon [icon]="faMapSigns" class="page-title-img mr-1"></fa-icon>
    <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 start">
        <div *ngIf="filteredData" fxLayout="row" fxFlex="100" [ngClass]="{'error-border w-100 routing-tabs-block': flgLoading[0]==='error', 'w-100 routing-tabs-block': true}">
          <mat-tab-group fxLayout="column" fxFlex="100">
            <mat-tab label="Forwarding History">
              <div class="p-2" *ngIf="errorMessage !== ''">{{errorMessage}}</div>
              <rtl-cl-forwarding-history *ngIf="errorMessage === ''" [successfulEvents]="successfulData"></rtl-cl-forwarding-history>
            </mat-tab>
            <mat-tab label="Failed Transactions">
              <div class="p-2" *ngIf="errorMessage !== ''">{{errorMessage}}</div>
              <rtl-cl-failed-history *ngIf="errorMessage === ''" [failedEvents]="failedData"></rtl-cl-failed-history>
            </mat-tab>
          </mat-tab-group>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
</div>
