<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="!cycleTraffic && !monthTraffic" overlayParent></app-fl-backdrop>
  <div layoutDirection="row" layoutDirection-xs="column" layoutDirection-sm="column" appLayoutGap="10px">
    <div appFlex="50">
      <h2 class="fl-heading-md" i18n>Traffic per cycle</h2>
      <table mat-table [dataSource]="cycleTraffic" class="full-width">
        <ng-container matColumnDef="start_dt">
          <th mat-header-cell *matHeaderCellDef i18n>Start date</th>
          <td mat-cell *matCellDef="let element"><app-date-displayer [date]="element.start_dt"></app-date-displayer></td>
        </ng-container>

        <ng-container matColumnDef="end_dt">
          <th mat-header-cell *matHeaderCellDef i18n>End date</th>
          <td mat-cell *matCellDef="let element"><app-date-displayer [date]="element.end_dt"></app-date-displayer></td>
        </ng-container>

        <ng-container matColumnDef="in">
          <th mat-header-cell *matHeaderCellDef i18n>Incoming</th>
          <td mat-cell *matCellDef="let element"> {{element.in_display}} </td>
        </ng-container>

        <ng-container matColumnDef="out">
          <th mat-header-cell *matHeaderCellDef i18n>Outgoing</th>
          <td mat-cell *matCellDef="let element"> {{element.out_display}} </td>
        </ng-container>

        <ng-container matColumnDef="total">
          <th mat-header-cell *matHeaderCellDef i18n>Total</th>
          <td mat-cell *matCellDef="let element"> {{element.total_display}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
    <div appFlex="50">
      <h2 class="fl-heading-md" i18n>Traffic per month</h2>
      <table mat-table [dataSource]="monthTraffic" class="full-width">
        <ng-container matColumnDef="start_dt">
          <th mat-header-cell *matHeaderCellDef i18n>Start date</th>
          <td mat-cell *matCellDef="let element"><app-date-displayer [date]="element.start_dt"></app-date-displayer></td>
        </ng-container>

        <ng-container matColumnDef="end_dt">
          <th mat-header-cell *matHeaderCellDef i18n>End date</th>
          <td mat-cell *matCellDef="let element"><app-date-displayer [date]="element.end_dt"></app-date-displayer></td>
        </ng-container>

        <ng-container matColumnDef="in">
          <th mat-header-cell *matHeaderCellDef i18n>Incoming</th>
          <td mat-cell *matCellDef="let element"> {{element.in_display}} </td>
        </ng-container>

        <ng-container matColumnDef="out">
          <th mat-header-cell *matHeaderCellDef i18n>Outgoing</th>
          <td mat-cell *matCellDef="let element"> {{element.out_display}} </td>
        </ng-container>

        <ng-container matColumnDef="total">
          <th mat-header-cell *matHeaderCellDef i18n>Total</th>
          <td mat-cell *matCellDef="let element"> {{element.total_display}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
  </div>

</div>

