<div class="container">

  <ng-container *ngVar="(scope$ | async) as scope">
    @if (scope) {
      <h1
        class="header"
        id="{{ scope.id }}">
        {{ 'statistics.header' | translate: { scope: getName(scope) } }}
      </h1>
    }
  </ng-container>

  <ng-container *ngVar="reports$ | async as reports">

    @if (!reports) {
      <ds-loading></ds-loading>
    }

    @if (reports) {
      @for (report of reports; track report) {
        <ds-statistics-table
          [report]="report"
          class="m-2 {{ report.id }}">
        </ds-statistics-table>
      }
      @if ((hasData$ | async) !== true) {
        <div>
          {{ 'statistics.page.no-data' | translate }}
        </div>
      }
    }

  </ng-container>

</div>
