<div class="fl-content fl-content-min-height" layoutDirection="row" appLayoutGap="10px" layoutDirection-lt-md="column">
  <app-fl-backdrop *ngIf="!schedules" overlayParent></app-fl-backdrop>
  <div layoutDirection="column" appFlex="100" *ngIf="schedules">
    <h2 class="fl-heading-md fl-margin-left-small" i18n>
      Backup schedules
    </h2>
    <p *ngIf="schedules.length < 1" class="fl-detail fl-margin-left-small" i18n>
      No backup schedules for this database instance
    </p>
    <table *ngIf="schedules.length" class="full-width" mat-table [dataSource]="schedules">
      <ng-container matColumnDef="backup_name">
        <th mat-header-cell *matHeaderCellDef i18n>Name</th>
        <td mat-cell *matCellDef="let element">
          <span>
            {{element.backup_name}}
          </span>
        </td>
      </ng-container>
      <ng-container matColumnDef="backup_type">
        <th mat-header-cell *matHeaderCellDef i18n>Type</th>
        <td mat-cell *matCellDef="let element">
          <span>
            {{ element.backup_type }}
          </span>
        </td>
      </ng-container>
      <ng-container matColumnDef="swift_container">
        <th mat-header-cell *matHeaderCellDef i18n>Swift container</th>
        <td mat-cell *matCellDef="let element">
          <span>
            {{ element.swift_container | nullValue }}
          </span>
        </td>
      </ng-container>
      <ng-container matColumnDef="incremental">
        <th mat-header-cell *matHeaderCellDef i18n>Incremental</th>
        <td mat-cell *matCellDef="let element">
          <span>
            {{ element.incremental | yesNo }}
          </span>
        </td>
      </ng-container>
      <ng-container matColumnDef="run_at">
        <th mat-header-cell *matHeaderCellDef i18n>Next run</th>
        <td mat-cell *matCellDef="let element">
          <span>
            {{element.run_at | dateFormatter: scheduleDateFormat}}
          </span>
        </td>
      </ng-container>
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let element">
          <button (click)="deleteSchedule(element)" mat-icon-button [attr.fl-tooltip]="deleteScheduleText">
            <mat-icon>delete</mat-icon>
          </button>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="schedulesDisplayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: schedulesDisplayedColumns;"></tr>
    </table>
    <div class="fl-margin-top">
      <button color="primary" (click)="openCreateBackupScheduleDialog()" mat-button i18n>
        Create new backup schedule
      </button>
    </div>
  </div>
</div>
