<div mat-dialog-title class="">
  <div class="row align-items-center">
    <h2 class="flex-grow-1 m-0">
      {{ "WTF_BACKUP.DIALOG_TITLE" | translate: { clientType: selectedInstallation.displayName } }}
    </h2>
    <button class="wu-btn wu-btn-icon wu-btn-flat wu-btn-primary" [mat-dialog-close]="true" [disabled]="busy$ | async">
      <mat-icon svgIcon="fas:xmark"> </mat-icon>
    </button>
  </div>
</div>
<mat-dialog-content *ngIf="busy$ | async" class="wtf-backup-dialog">
  <div class="row justify-content-center">
    <div class="col align-items-center">
      <mat-spinner diameter="55"></mat-spinner>
      <div>{{ this.busyText$ | async | translate: (busyTextParams$ | async) }}</div>
    </div>
  </div>
</mat-dialog-content>

<mat-dialog-content *ngIf="(busy$ | async) === false" class="wtf-backup-dialog">
  <div *ngIf="(hasBackups$ | async) === false">
    <h4 class="mb-0">No backups were found at:</h4>
    <p class="text-2">{{ backupPath }}</p>
  </div>
  <div *ngIf="(hasBackups$ | async) === true">
    <p class="text-2">
      {{ "WTF_BACKUP.BACKUP_COUNT_TEXT" | translate: { count: backupCt$ | async } }}
    </p>
    <ul class="backup-list rounded">
      <li *ngFor="let backup of backups$ | async" class="backup-list-item">
        <div class="row align-items-center">
          <div class="flex-grow-1">
            <div class="row">
              <div class="title ml-1 flex-grow-1" [ngClass]="{ 'text-warning': backup.error }">{{ backup.title }}</div>
            </div>
            <div class="row text-2">
              <div class="mr-3">{{ backup.date | relativeDuration }}</div>
              <div class="mr-3">{{ backup.size }}</div>
            </div>
          </div>
          <!-- ACTIONS -->
          <div *ngIf="backup.error" class="flex-shrink-0">{{ "WTF_BACKUP.ERROR." + backup.error | translate }}</div>
          <div *ngIf="backup.error === undefined" class="flex-shrink-0">
            <button
              class="wu-btn wu-btn-icon wu-btn-flat mr-2"
              [disabled]="busy$ | async"
              [matTooltip]="'WTF_BACKUP.TOOL_TIP.APPLY_BUTTON' | translate"
              (click)="onClickApplyBackup(backup)"
            >
              <mat-icon svgIcon="fas:clock-rotate-left"> </mat-icon>
            </button>
            <button
              class="wu-btn wu-btn-warning wu-btn-flat wu-btn-icon"
              [disabled]="busy$ | async"
              [matTooltip]="'WTF_BACKUP.TOOL_TIP.DELETE_BUTTON' | translate"
              (click)="onClickDeleteBackup(backup)"
            >
              <mat-icon svgIcon="fas:trash"> </mat-icon>
            </button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</mat-dialog-content>
<mat-dialog-actions>
  <button class="wu-btn wu-btn-flat" [disabled]="busy$ | async" (click)="onShowFolder()">
    {{ "WTF_BACKUP.SHOW_FOLDER_BUTTON" | translate }}
  </button>
  <div class="flex-grow-1"></div>
  <button class="wu-btn wu-btn-primary" [disabled]="busy$ | async" (click)="onCreateBackup()">
    {{ "WTF_BACKUP.CREATE_BACKUP_BUTTON" | translate }}
  </button>
</mat-dialog-actions>
