<div class="reports">
  <digi-table af-variation="secondary">
    <table>
      <thead>
        <tr>
          <th scope="col" *ngFor="let column of columnHeaders">{{column.label}}</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let report of reports">
          <th scope="row">
            <a [routerLink]="report?.id">{{ report.type }}</a>
          </th>
          <td>{{ report.sendDate | localDate }}</td>
          <td>{{ report.status }}</td>
        </tr>
      </tbody>
    </table>
  </digi-table>

  <digi-navigation-pagination
    *ngIf="totalPage > 1"
    class="reports__pagination"
    [afTotalPages]="totalPage"
    [afCurrentResultStart]="currentResultStart"
    [afCurrentResultEnd]="currentResultEnd"
    [afTotalResults]="count"
    (afOnPageChange)="setNewPage($event.detail)"
    af-result-name="reports"
  >
  </digi-navigation-pagination>
</div>
