<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <p class="fl-important-text" i18n>Warning: instance will not be available during the backup process.</p>
    <form appFormSubmit (ngSubmit)="createBackup()" [formGroup]="backupForm">
      <app-form-errors #formErrors [formGroup]="backupForm"></app-form-errors>
      <div layoutDirection="column">
        <mat-radio-group *ngIf="isStaff"
          formControlName="create_as_client">
          <mat-radio-button class="fl-block" [color]="'primary'" [value]="false">
            <span i18n>Create backup in admin project</span><br>
            <span class="fl-detail" i18n>
              End-user will NOT see this backup and NO storage cost will incur
            </span>
          </mat-radio-button>
          <mat-radio-button class="fl-block" [color]="'primary'" [value]="true">
            <span i18n>Create backup in client project</span><br>
            <span class="fl-detail line-height-16" i18n>
              End-user will see this backup and storage cost will incur
              (assuming you have a matching image pricing rule)
            </span>
          </mat-radio-button>
        </mat-radio-group>
        <mat-form-field appFlex="100">
          <mat-label i18n>Backup name</mat-label>
          <input matInput placeholder="Backup name" i18n-placeholder type="text" name="backup_name"
                 formControlName="backup_name" required>
          <mat-error>{{backupForm.controls.backup_name.errors | errorFormatter}}</mat-error>
        </mat-form-field>
        <mat-form-field appFlex="100">
          <mat-label i18n>Backup rotation</mat-label>
          <input matInput placeholder="Backup rotation" i18n-placeholder type="number" min="1" step="1" name="rotation"
                 formControlName="rotation" required>
          <mat-hint *ngIf="rotationControl.value >= (data.existingBackupsCount + 1)" i18n>
            Number of backups to keep (the rest backups of type manual will be deleted)
          </mat-hint>
          <mat-hint *ngIf="!(isStaff && createAsClientControl.value) &&
              rotationControl.value < (data.existingBackupsCount + 1)">
            <span class="fl-important-text" i18n>
              {{ ((data.existingBackupsCount + 1) - rotationControl.value) }} older backups will be deleted.
            </span>
          </mat-hint>
          <mat-hint *ngIf="(isStaff && createAsClientControl.value) &&
              rotationControl.value < (data.existingBackupsCountClientProject + 1)">
            <span class="fl-important-text" i18n>
              {{ ((data.existingBackupsCountClientProject + 1) - rotationControl.value) }} older backups will be deleted.
              (only client's project backups are considered)
            </span>
          </mat-hint>
          <mat-error>{{backupForm.controls.rotation.errors | errorFormatter}}</mat-error>
        </mat-form-field>
      </div>
    </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>
