<app-common-dialog [dialogContent]="dialogContent" [dialogRef]="dialogRef">
  <ng-template #dialogContent>
    <form appFormSubmit (ngSubmit)="createOrUpdate()" [formGroup]="snapshotForm" layoutDirection="column">
      <app-form-errors #formErrors [formGroup]="snapshotForm"></app-form-errors>
      <app-credit-warning *ngIf="!data.snapshot" resourceName="volume backup" i18n-resourceName></app-credit-warning>
      <ng-container *ngIf="!data.snapshot">
        <div layoutDirection="row" layoutAlign="start center" appLayoutGap="10px">
          <mat-icon class="material-icons fl-icon-yellow hide-xs">warning</mat-icon>
          <p class="fl-red-color" i18n>
            Note that OpenStack allows you to revert only to the latest snapshot
          </p>
        </div>
        <mat-checkbox *ngIf="auth.feature('ui.openstack.volumes.snapshots.show-project-checkbox')"
                      class="fl-margin-bottom-medium"
                      formControlName="for_client" color="primary" i18n>
          Create resource in client's project. (client may get billed for this)
        </mat-checkbox>
      </ng-container>
      <app-autocomplete *ngIf="showVolumeSelect"
                        [control]="snapshotForm.controls.volume"
                        [optionsService]="volumesApiService"
                        [placeholderSelected]="volumeSelectedPlaceholder"
                        [placeholderUnselected]="volumeUnselectedPlaceholder"
                        [displayFn]="volumeDisplay"></app-autocomplete>

      <mat-form-field class="full-width">
        <mat-label i18n>Snapshot name</mat-label>
        <input matInput placeholder="Snapshot name" i18n-placeholder type="text" formControlName="name" required>
        <mat-error i18n>{{backendErrors['name'] || fieldRequiredTxt }}</mat-error>
      </mat-form-field>
      <ng-container *ngIf="!data.snapshot">
        <mat-checkbox formControlName="force" class="fl-margin-bottom" color="primary" i18n>
          Force (indicates whether to create snapshot, even if the volume is attached)
        </mat-checkbox>
        <mat-form-field class="full-width">
          <mat-label i18n>Snapshot description</mat-label>
          <input matInput placeholder="Snapshot description" i18n-placeholder type="text" formControlName="description">
          <mat-error>{{backendErrors['description']}}</mat-error>
        </mat-form-field>
      </ng-container>
    </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>
