<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      *ngIf=object [formGroup]="subnetPoolForm" layoutDirection="column" class="fl-content fl-content-min-height">
  <app-form-errors #formErrors [formGroup]="subnetPoolForm"></app-form-errors>

  <mat-radio-group *ngIf="!object.id" layoutDirection="column" (ngModelChange)="changeDestination($event)"
    [(ngModel)]="createInClientProject" [ngModelOptions]="{standalone: true}">
    <mat-radio-button [color]="'primary'" [value]="false" i18n>
      Create subnet pool in admin project
    </mat-radio-button>
    <mat-radio-button [color]="'primary'" [value]="true" class="fl-margin-bottom-medium" i18n>
      Create subnet pool in client's project
    </mat-radio-button>
  </mat-radio-group>

  <ng-container *ngIf="!object.id && createInClientProject">
    <app-client-autocomplete [control]="subnetPoolForm.controls.client" clientsWithEnabledProject></app-client-autocomplete>
  </ng-container>

  <mat-form-field *ngIf="!this.object.id">
    <mat-label i18n>Region</mat-label>
    <mat-select formControlName="region" placeholder="Region" i18n-placeholder>
      <mat-option *ngFor="let region of createOptions.regions" [value]="region.id">
        {{region.id}}
      </mat-option>
    </mat-select>
    <mat-error>{{fieldErrors['region']}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label i18n>Name</mat-label>
    <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name" required>
    <mat-error>{{fieldErrors['name']}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label i18n>Description</mat-label>
    <input matInput placeholder="Description" i18n-placeholder type="text" formControlName="description">
    <mat-error>{{fieldErrors['description']}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label i18n>Default prefix length</mat-label>
    <input matInput placeholder="Default prefix length" i18n-placeholder
           type="number" formControlName="default_prefixlen" required>
    <mat-error>{{fieldErrors['default_prefixlen']}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label i18n>Min prefix length</mat-label>
    <input matInput placeholder="Min prefix length" i18n-placeholder
           type="number" formControlName="min_prefixlen" required>
    <mat-error>{{fieldErrors['min_prefixlen']}}</mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label i18n>Max prefix length</mat-label>
    <input matInput placeholder="Max prefix length" i18n-placeholder
           type="number" formControlName="max_prefixlen" required>
    <mat-error>{{fieldErrors['max_prefixlen']}}</mat-error>
  </mat-form-field>

  <div layoutDirection="row" layoutDirection-xs="column">
    <mat-checkbox *ngIf="!this.object.id" color="primary" formControlName="shared" appFlex="50" xsFlex="none" i18n>Shared</mat-checkbox>

    <mat-checkbox color="primary" formControlName="is_default" appFlex="50" xsFlex="none" i18n>Default</mat-checkbox>
  </div>

  <div formArrayName="prefixes" layoutDirection="column" layoutAlign="start stretch">
    <div *ngFor="let prefix of prefixes.controls; let index=index;" layoutDirection="row" appLayoutGap="10px">
      <mat-form-field appFlex="auto">
        <mat-label i18n>Prefix</mat-label>
        <input matInput placeholder="Prefix" i18n-placeholder type="text" [formControlName]="index" required>
        <mat-error>{{fieldErrors['prefixes.' + index.toString()]}}</mat-error>
      </mat-form-field>
      <button *ngIf="prefixes.controls.length > 1" mat-icon-button (click)="deletePrefix(index)">
        <mat-icon>delete</mat-icon>
      </button>
    </div>
  </div>

  <div layoutDirection="column" layoutAlign="center center" class="fl-margin-top">
    <button mat-fab (click)="addPrefix($event)">
      <mat-icon>add</mat-icon>
    </button>
    <span class="fl-detail" i18n>Add prefix</span>
  </div>

</form>
