<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loadingQuotas" i18n></app-fl-backdrop>
  <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
        [formGroup]="volumeQuotasForm" layoutDirection="column" [class.hide]="!quotasAvailable">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="volumeQuotasForm"></app-form-errors>
    <p class="fl-detail fl-margin-bottom-small" i18n>Set the desired quota values. Use -1 for unlimited.</p>
    <mat-form-field>
      <mat-label i18n>Volumes</mat-label>
      <input matInput placeholder="Volumes" i18n-placeholder type="number" formControlName="volumes"
             required>
      <mat-error>{{fieldErrors['volumes']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Snapshots</mat-label>
      <input matInput placeholder="Snapshots" i18n-placeholder type="number" formControlName="snapshots"
             required>
      <mat-error>{{fieldErrors['snapshots']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Backups</mat-label>
      <input matInput placeholder="Backups" i18n-placeholder type="number" formControlName="backups"
             required>
      <mat-error>{{fieldErrors['backups']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Groups</mat-label>
      <input matInput placeholder="Groups" i18n-placeholder type="number" formControlName="groups"
             required>
      <mat-error>{{fieldErrors['groups']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Per volume gigabytes</mat-label>
      <input matInput placeholder="Per volume gigabytes" i18n-placeholder type="number"
             formControlName="per_volume_gigabytes"
             required>
      <mat-error>{{fieldErrors['per_volume_gigabytes']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Gigabytes</mat-label>
      <input matInput placeholder="Gigabytes" i18n-placeholder type="number" formControlName="gigabytes"
             required>
      <mat-error>{{fieldErrors['gigabytes']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Backup gigabytes</mat-label>
      <input matInput placeholder="Backup gigabytes" i18n-placeholder type="number"
             formControlName="backup_gigabytes" required>
      <mat-error>{{fieldErrors['backup_gigabytes']}}</mat-error>
    </mat-form-field>
    <mat-checkbox class="fl-margin-bottom" color="primary" formControlName="set_for_all_regions" i18n>Set for all regions
    </mat-checkbox>
  </form>
  <ng-container *ngIf="!quotasAvailable">
    <p class="fl-detail text-center" i18n>Unable to load volume quotas for region {{selectedRegion}}</p>
  </ng-container>
</div>
