<h4 mat-dialog-title><ng-container i18n="Restore DB from backup">Restore DB from backup</ng-container></h4>

<mat-dialog-content>
  <mat-selection-list [multiple]="false" [(ngModel)]="selected_backup">
    @for (db_backup of db_backups; track db_backup) {
      <mat-list-option [value]="db_backup.name" [matTooltip]="db_backup.name">
        <div class="container-fluid">
          <div class="row">
            <div class="col-4">
              {{db_backup.timestamp*1000 | date: 'short'}}
            </div>
            <div class="col-4">
              {{(db_backup.size/1000).toFixed(2)}} kB
            </div>
            <div class="col-4" style="text-transform: capitalize;">
              {{db_backup.source}}
            </div>
          </div>
        </div>
      </mat-list-option>
    }
  </mat-selection-list>
</mat-dialog-content>

<mat-dialog-actions>
  <button mat-button mat-dialog-close><ng-container i18n="Restore DB cancel button">Cancel</ng-container></button>
  <button mat-button [disabled]="restoring" (click)="restoreClicked()" [disabled]="!selected_backup || selected_backup.length !== 1"><ng-container i18n="Restore button">Restore</ng-container></button>
  @if (restoring) {
    <div class="mat-spinner">
      <mat-spinner [diameter]="25"></mat-spinner>
    </div>
  }
</mat-dialog-actions>