<div class="fl-content fl-content-min-height" layoutDirection="column" *ngIf="object">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <table *ngIf="historyLogs && historyLogs.length" mat-table [dataSource]="historyLogs" class="full-width">
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <app-date-displayer [date]="element.start_time" withTime></app-date-displayer>
      </td>
    </ng-container>
    <ng-container matColumnDef="message">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        {{ element.action }} <span *ngIf="element.message">{{element.message}}</span>
      </td>
    </ng-container>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <span appFlex="auto"></span>
  <div *ngIf="previousPage || nextPage" appLayoutGap="10px" layoutAlign="end" class="fl-margin-top">
    <button mat-button (click)="changePage('previous')"
            [disabled]="previousPage === false || loading === true" color="primary" i18n>
      Previous page
      <ng-container *ngIf="previousPage && loading !== true">({{markerHistory.length}})</ng-container>
    </button>
    <button mat-button (click)="changePage('next')"
            [disabled]="nextPage === false || loading === true" color="primary" i18n>
      Next page
      <ng-container *ngIf="nextPage && loading !== true">({{markerHistory.length + 2}})</ng-container>
    </button>
  </div>
</div>
