<div class="fl-content fl-content-min-height" layoutDirection="column">
  <app-fl-backdrop *ngIf="loading" overlayParent></app-fl-backdrop>
  <table class="full-width" mat-table *ngIf="tableData.length; else noBackups" [dataSource]="tableData">
    <ng-container matColumnDef="created">
      <th mat-header-cell *matHeaderCellDef i18n>Created</th>
      <td mat-cell *matCellDef="let element">
        <app-date-displayer [date]="element.created" withTime></app-date-displayer>
      </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef i18n>Name</th>
      <td mat-cell *matCellDef="let element">{{element.name}}</td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef i18n>Status</th>
      <td mat-cell *matCellDef="let element">{{element.status}}</td>
    </ng-container>

    <ng-container matColumnDef="size">
      <th mat-header-cell *matHeaderCellDef i18n>Size</th>
      <td mat-cell *matCellDef="let element">
        <span *ngIf="element.size; else noSize" i18n>{{element.size}} GB</span>
        <ng-template #noSize>
          <span i18n>n/a</span>
        </ng-template>
      </td>
    </ng-container>

    <ng-container matColumnDef="(actions)">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <div>
          <button mat-icon-button fl-tooltip="Delete backup" i18n-fl-tooltip
                  *ngIf="element.status !== 'BUILDING'"
                  (click)="deleteBackup(element)" class="fl-float-right">
            <mat-icon>delete</mat-icon>
          </button>
          <button mat-icon-button fl-tooltip="Create instance from backup" i18n-fl-tooltip
                  *ngIf="element.status === 'COMPLETED'"
                  (click)="createInstanceFromBackup(element)" class="fl-float-right">
            <mat-icon>redo</mat-icon>
          </button>
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <ng-template #noBackups>
    <p class="fl-detail" i18n>No backups</p>
  </ng-template>

  <span appFlex="auto"></span>
  <div layoutDirection="row" layoutAlign="end end" class="fl-margin-top">
    <button [disabled]="object.status !== 'ACTIVE'" mat-button color="primary"
            (click)="createNewBackup()" i18n>Create backup</button>
  </div>
</div>
