<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loadingQuotas" i18n></app-fl-backdrop>
  <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
        [formGroup]="databaseQuotasForm" layoutDirection="column" [class.hide]="!quotasAvailable">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="databaseQuotasForm"></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>Instances</mat-label>
      <input matInput placeholder="Instances" i18n-placeholder type="number" formControlName="instances"
             required>
      <mat-error>{{fieldErrors['instances']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>RAM(MB)</mat-label>
      <input matInput placeholder="RAM(MB)" i18n-placeholder type="number" formControlName="ram"
             required>
      <mat-error>{{fieldErrors['ram']}}</mat-error>
    </mat-form-field>
    <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>Backups</mat-label>
      <input matInput placeholder="Backups" i18n-placeholder type="number" formControlName="backups"
             required>
      <mat-error>{{fieldErrors['backups']}}</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 database quotas for region {{selectedRegion}}</p>
  </ng-container>
</div>
