<div class="row">
    <div class="grid-height-auto">
        <table mat-table [dataSource]="dataSource" class="w-100" matSort matSortActive="createdDate"
            matSortDirection="desc" matSortDisableClear>
            <ng-container matColumnDef="createdDate">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'ACTION' |
                    translate}} {{'DATE' |
                    translate}}</th>
                <td mat-cell *matCellDef="let document"> {{document?.createdDate |
                    utcToLocalTime:'short'}}
                </td>
            </ng-container>
            <ng-container matColumnDef="operationName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'OPERATION' |
                    translate}} </th>
                <td mat-cell *matCellDef="let document">
                    {{document.operationName.toUpperCase() | translate }}
                </td>
            </ng-container>
            <ng-container matColumnDef="createdBy">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'BY_WHOM' |
                    translate}} </th>
                <td mat-cell *matCellDef="let document"> {{document?.createdBy}} </td>
            </ng-container>
            <ng-container matColumnDef="permissionUser">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'TO_WHOM_USER'
                    | translate}} </th>
                <td mat-cell *matCellDef="let document"> {{document?.permissionUser}}
                </td>
            </ng-container>
            <ng-container matColumnDef="permissionRole">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'TO_WHOM_ROLE'
                    | translate}} </th>
                <td mat-cell *matCellDef="let document"> {{document?.permissionRole}}
                </td>
            </ng-container>
            <ng-container matColumnDef="footer">
                <td mat-footer-cell colspan="7" *matFooterCellDef>
                    <mat-paginator [length]="documentResource.totalCount" [pageSize]="documentResource.pageSize"
                        [pageSizeOptions]="[10, 20, 30]">
                    </mat-paginator>
                </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            <tr mat-footer-row *matFooterRowDef="footerToDisplayed;sticky: true"></tr>
            <tr *matNoDataRow>
                <td colspan="7">
                    <div class="m-2">
                        <b> {{'NO_DATA_FOUND' | translate}}</b>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</div>