<div class="fl-content-min-height" layoutDirection="column">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <mat-accordion [displayMode]="'flat'">
    <mat-expansion-panel *ngFor="let historyLog of historyLogs; let i = index"
                         (opened)="openedLog(historyLog, i)" class="align-headers">
      <mat-expansion-panel-header>
        <mat-panel-title>
          <app-date-displayer [date]="historyLog.start_time" withTime></app-date-displayer>
        </mat-panel-title>
        <mat-panel-description>
          {{ historyLog.action }} <span *ngIf="historyLog.message">{{ historyLog.message }}</span>
        </mat-panel-description>
      </mat-expansion-panel-header>
      <mat-progress-bar *ngIf="historyLog.loading === true" [mode]="'indeterminate'"></mat-progress-bar>
      <ng-container *ngIf="historyLog.loading === false">
        <div *ngFor="let logEvent of historyLog.events" appLayoutGap="50px">
          <div layoutDirection="row" layoutDirection-xs="column">
            <div appFlex="400px"><app-date-displayer [date]="logEvent.start_time" withTime></app-date-displayer> - <app-date-displayer
              [date]="logEvent.finish_time" withTime></app-date-displayer></div>
            <div appFlex="auto">{{ logEvent.event }}</div>
            <div appFlex="100px">{{ logEvent.result }}</div>
          </div>
          <div *ngIf="logEvent.traceback" class="fl-margin-top-medium">
            <span class="fl-bold">Traceback:</span>
            <pre>{{ logEvent.traceback }}</pre>
          </div>
        </div>
      </ng-container>
    </mat-expansion-panel>
  </mat-accordion>
  <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>
