<div class='buttons'>
    <span>Integrity checks:</span>
    <button mat-raised-button
        *ngFor='let integrityCheck of integrityChecks'
        [title]='integrityCheck.description'
        (click)='runIntegrityCheck(integrityCheck)'
    >
        <mat-icon>report</mat-icon>
        {{ integrityCheck.name }}
    </button>

    <mat-progress-bar
        *ngIf='pleaseWait'
        mode='indeterminate'
        color='accent'
        value=100
    >
    </mat-progress-bar>
</div>

<div *ngIf='report'>
    <h2>{{ report.name }}</h2>
    <p>{{ report.description }}</p>
</div>
<div class='tools'>
    <mat-form-field class='filter'>
        <mat-label>Filter in report</mat-label>
        <input matInput
            (input)='applyFilter()'
            matTooltip='Filter the items of the report from the table'
            [(ngModel)]='filterText'/>
    </mat-form-field>
</div>

<table mat-table matSort [dataSource]='dataSource'>
    <ng-container *ngFor='let colName of fieldNames'
        [matColumnDef]='colName'>
        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ colName }}</th>
        <td mat-cell *matCellDef="let value"> {{ value[colName] }} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="fieldNames; sticky: true"></tr>
    <tr mat-row [ngClass]="{even: even}"
        *matRowDef="let row; let even = even; columns: fieldNames"></tr>
</table>
<mat-paginator
    class="paginator"
    [pageSizeOptions]="[10, 20, 50, 100]"
    [pageIndex]='0'
    [pageSize]='10'
    showFirstLastButtons
    >
</mat-paginator>
