<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="loadingQuotas" i18n></app-fl-backdrop>
  <form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
        [formGroup]="networkQuotasForm" layoutDirection="column" [class.hide]="!quotasAvailable">
    <!--suppress JSUnusedGlobalSymbols -->
    <app-form-errors #formErrors [formGroup]="networkQuotasForm"></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>Floating IPs</mat-label>
      <input matInput placeholder="Floating IPs" i18n-placeholder type="number" formControlName="floatingip"
             required>
      <mat-error>{{fieldErrors['floatingip']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Networks</mat-label>
      <input matInput placeholder="Networks" i18n-placeholder type="number" formControlName="network"
             required>
      <mat-error>{{fieldErrors['network']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Ports</mat-label>
      <input matInput placeholder="Ports" i18n-placeholder type="number" formControlName="port"
             required>
      <mat-error>{{fieldErrors['port']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>RBAC policies</mat-label>
      <input matInput placeholder="RBAC policies" i18n-placeholder type="number" formControlName="rbac_policy"
             required>
      <mat-error>{{fieldErrors['rbac_policy']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Routers</mat-label>
      <input matInput placeholder="Routers" i18n-placeholder type="number" formControlName="router"
             required>
      <mat-error>{{fieldErrors['router']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Security groups</mat-label>
      <input matInput placeholder="Security groups" i18n-placeholder type="number" formControlName="security_group"
             required>
      <mat-error>{{fieldErrors['security_group']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Security group rules</mat-label>
      <input matInput placeholder="Security group rules" i18n-placeholder type="number"
             formControlName="security_group_rule" required>
      <mat-error>{{fieldErrors['security_group_rule']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Subnet</mat-label>
      <input matInput placeholder="Subnet" i18n-placeholder type="number"
             formControlName="subnet" required>
      <mat-error>{{fieldErrors['subnet']}}</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label i18n>Subnet pool</mat-label>
      <input matInput placeholder="Subnet pool" i18n-placeholder type="number"
             formControlName="subnetpool" required>
      <mat-error>{{fieldErrors['subnetpool']}}</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 network quotas for region {{selectedRegion}}</p>
  </ng-container>
</div>
