<form *ngIf="createOptions" appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="memberForm">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="memberForm"></app-form-errors>
  <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
  <div layoutDirection="column">
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="33%">
        <mat-label i18n>Name</mat-label>
        <input matInput placeholder="Name" i18n-placeholder type="text" formControlName="name">
        <mat-error>{{fieldErrors['name']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="33%">
        <mat-label i18n>IP address</mat-label>
        <input matInput placeholder="IP address" i18n-placeholder type="text" formControlName="address"
               required>
        <mat-error>{{fieldErrors['address']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="33%">
        <mat-label i18n>Port</mat-label>
        <input matInput type="number" placeholder="Port" i18n-placeholder
               formControlName="protocol_port" min="1" required>
        <mat-error>{{fieldErrors['protocol_port']}}</mat-error>
      </mat-form-field>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="33%">
        <mat-label i18n>Weight</mat-label>
        <input matInput type="number" placeholder="Weight" i18n-placeholder
               formControlName="weight" min="1" required>
        <mat-error>{{fieldErrors['weight']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="33%">
        <mat-label i18n>Monitor address</mat-label>
        <input matInput placeholder="Monitor address" i18n-placeholder type="text"
               formControlName="monitor_address">
        <mat-error>{{fieldErrors['monitor_address']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="33%">
        <mat-label i18n>Monitor port</mat-label>
        <input matInput type="number" placeholder="Monitor port" i18n-placeholder
               formControlName="monitor_port" min="1">
        <mat-error>{{fieldErrors['monitor_port']}}</mat-error>
      </mat-form-field>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-checkbox formControlName="admin_state_up" color="primary" class="fl-margin-top" i18n>Admin state up</mat-checkbox>
      <mat-checkbox formControlName="backup" color="primary" class="fl-margin-top" i18n>Backup</mat-checkbox>
    </div>
  </div>
</form>
