<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form appFormSubmit (ngSubmit)="createOrUpdate()" [formGroup]="backupForm" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="backupForm"></app-form-errors>
      <app-credit-warning *ngIf="!data.backup" resourceName="volume backup" i18n-resourceName></app-credit-warning>
      <mat-checkbox *ngIf="auth.feature('ui.openstack.volumes.backups.show-project-checkbox') && !data.backup"
                    class="fl-margin-bottom-medium"
                    formControlName="for_client" color="primary" i18n>
        Create backup in client's project
      </mat-checkbox>
      <app-autocomplete *ngIf="showVolumeSelect"
                        [control]="backupForm.controls.volume"
                        [optionsService]="volumesApiService"
                        [placeholderSelected]="volumeSelectedPlaceholder"
                        [placeholderUnselected]="volumeUnselectedPlaceholder"
                        [displayFn]="volumeDisplay"></app-autocomplete>

      <mat-form-field class="full-width">
        <mat-label i18n>Backup name</mat-label>
        <input matInput placeholder="Backup name" i18n-placeholder type="text" formControlName="name" required>
        <mat-error i18n>{{backendErrors['name'] || fieldRequiredTxt }}</mat-error>
      </mat-form-field>
      <mat-checkbox *ngIf="!data.backup" formControlName="incremental" color="primary" i18n>
        Incremental (the first backup of a volume has to be a full backup)
      </mat-checkbox>
      <mat-checkbox *ngIf="!data.backup" formControlName="force"
                    class="fl-margin-bottom"
                    color="primary" i18n>
        Force (indicates whether to backup, even if the volume is attached)
      </mat-checkbox>
      <mat-form-field class="full-width">
        <mat-label i18n>Backup description</mat-label>
        <input matInput placeholder="Backup description" i18n-placeholder type="text" formControlName="description">
        <mat-error i18n>{{backendErrors['description'] || fieldRequiredTxt }}</mat-error>
      </mat-form-field>
    </form>

      <div class="fl-margin-right-medium estimated-price-text"
         *ngIf="estimatedCost"
         [class.invisible]="estimatedCostLoading"
         [class.fl-margin-top-medium]="!estimatedCostLoading"
         [innerHTML]="estimatedCost"></div>
      <app-flashing-dots layoutAlign="end center"
                         class="fl-margin-right-small fl-padding-right"
                         *ngIf="estimatedCostLoading"></app-flashing-dots>
  </ng-template>
</app-common-dialog>
