<form *ngIf="object" [formGroup]="networkForm" layoutDirection="column" class="fl-content fl-content-min-height"
      appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="networkForm"></app-form-errors>
  <app-credit-warning *ngIf="!object?.id" resourceName="network" i18n-resourceName></app-credit-warning>
  <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 *ngIf="!object.id">
    <mat-label i18n>Region</mat-label>
    <mat-select formControlName="region" placeholder="Region" i18n-placeholder required>
      <mat-option *ngFor="let region of createOptions.regions" [value]="region.id">
        {{region.id}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field *ngIf="networkForm.contains('availability_zone_hints')">
    <mat-label i18n>Availability zone hints</mat-label>
    <mat-select formControlName="availability_zone_hints"
                i18n-placeholder placeholder="Availability zone hints" multiple>
      <ng-container>
        <mat-option *ngFor="let az of createOptions.availability_zones" [value]="az">
          {{az}}
        </mat-option>
      </ng-container>
    </mat-select>
    <mat-error>{{fieldErrors['availability_zone_hints']}}</mat-error>
  </mat-form-field>

  <div layoutDirection="row" layoutDirection-xs="column">
    <mat-checkbox color="primary" formControlName="admin_state_up" appFlex="50" xsFlex="none" i18n>Admin state up</mat-checkbox>
  </div>
  <mat-checkbox color="primary" formControlName="port_security_enabled" i18n>Port security enabled</mat-checkbox>
  <mat-form-field>
    <mat-label i18n>MTU</mat-label>
    <input matInput placeholder="MTU" i18n-placeholder type="number"
           formControlName="mtu">
    <mat-error>{{networkForm.controls.mtu.errors | errorFormatter}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label i18n>DNS domain</mat-label>
    <input matInput placeholder="DNS domain" i18n-placeholder type="text"
           formControlName="dns_domain">
    <mat-hint i18n>Provide a FQDN ending in '.'</mat-hint>
    <mat-error>{{networkForm.controls.mtu.errors | errorFormatter}}</mat-error>
  </mat-form-field>

  <div>
    <mat-form-field>
      <mat-label i18n>Tags</mat-label>
      <mat-chip-grid #chipGrid aria-label="Enter tags" i18n-aria-label>
        <mat-chip-row *ngFor="let tag of networkForm.controls.tags.value"
                      (removed)="tagRemoved(tag)"
                      [editable]="true"
                      (edited)="tagEdited(tag, $event)">
          {{tag}}
          <button matChipRemove>
            <mat-icon>cancel</mat-icon>
          </button>
        </mat-chip-row>
        <input placeholder="New tag ..."
               i18n-placeholder
               [matChipInputFor]="chipGrid"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
               [matChipInputAddOnBlur]="true"
               (matChipInputTokenEnd)="addTag($event)"/>
      </mat-chip-grid>
    </mat-form-field>
  </div>
</form>
