<div class="reports-list">
  <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 *ngIf="getReportLink(report); else reportTypeTextRef" [routerLink]="getReportLink(report)"
              >{{ report.type }}</a
            >
            <ng-template #reportTypeTextRef>{{report.type}}</ng-template>
          </th>
          <td>
            <digi-typography-time [afDateTime]="report.date"></digi-typography-time>
            {{ report.date | date:'shortTime' }}
          </td>
          <td>{{ report.status }}</td>
        </tr>
      </tbody>
    </table>
  </digi-table>

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