<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      *ngIf="object" [formGroup]="networkForm"
      layoutDirection="column" class="fl-content fl-content-min-height">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="networkForm"></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 network in admin project
    </mat-radio-button>
    <mat-radio-button [color]="'primary'" [value]="true" class="fl-margin-bottom-medium" i18n>
      Create network in client's project
    </mat-radio-button>
  </mat-radio-group>

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

  <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="!object.id">
    <mat-label i18n>Provider network type</mat-label>
    <mat-select formControlName="provider_network_type"
                placeholder="Provider network type" i18n-placeholder required>
      <mat-option *ngFor="let providerType of createOptions.provider_types | keyvalue" [value]="providerType.key">
        {{providerType.value.display_name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field *ngIf="!object.id && showProviderPhysical">
    <mat-label i18n>Provider physical network</mat-label>
    <input matInput placeholder="Provider physical network" i18n-placeholder type="text" maxlength="255"
           formControlName="provider_physical_network">
    <mat-error>{{fieldErrors['provider_physical_network']}}</mat-error>
  </mat-form-field>

  <mat-form-field *ngIf="!object.id && showProviderSegmentationID">
    <mat-label i18n>Provider segmentation id</mat-label>
    <input matInput placeholder="Provider segmentation id" i18n-placeholder type="number"
           formControlName="provider_segmentation_id">
    <mat-hint i18n>Provide a value between {{minSegmentationID}} and {{maxSegmentationID}}</mat-hint>
    <mat-error>{{fieldErrors['provider_segmentation_id']}}</mat-error>
  </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" appLayoutGap="10px">
    <mat-checkbox color="primary" formControlName="admin_state_up" appFlex="50" xsFlex="none" i18n>Admin state up</mat-checkbox>
    <mat-checkbox color="primary" formControlName="router_external" appFlex="50" xsFlex="none" i18n>
      External
    </mat-checkbox>
  </div>

  <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
    <mat-checkbox color="primary" formControlName="shared" appFlex="50" xsFlex="none" i18n>Shared</mat-checkbox>
    <mat-checkbox color="primary" formControlName="is_default" appFlex="50" xsFlex="none"
                  *ngIf="authSvc.feature('openstack.networks.auto_create_network')" i18n>Default</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>
