<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)" [formGroup]="listenerForm">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="listenerForm"></app-form-errors>
  <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
  <div layoutDirection="column">
    <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>
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="50%">
        <mat-label i18n>Client data timeout</mat-label>
        <input matInput type="number" placeholder="Client data timeout" i18n-placeholder
               formControlName="timeout_client_data" min="0">
        <mat-error>{{fieldErrors['timeout_client_data']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="50%">
        <mat-label i18n>TCP inspect timeout</mat-label>
        <input matInput type="number" placeholder="TCP inspect timeout" i18n-placeholder
               formControlName="timeout_tcp_inspect" min="0">
        <mat-error>{{fieldErrors['timeout_tcp_inspect']}}</mat-error>
      </mat-form-field>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="50%">
        <mat-label i18n>Member connect timeout</mat-label>
        <input matInput type="number" placeholder="Member connect timeout" i18n-placeholder
               formControlName="timeout_member_connect" min="0">
        <mat-error>{{fieldErrors['timeout_member_connect']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="50%">
        <mat-label i18n>Member data timeout</mat-label>
        <input matInput type="number" placeholder="Member data timeout" i18n-placeholder
               formControlName="timeout_member_data" min="0">
        <mat-error>{{fieldErrors['timeout_member_data']}}</mat-error>
      </mat-form-field>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="50%">
        <mat-label i18n>Connection limit</mat-label>
        <input matInput type="number" placeholder="Connection limit" i18n-placeholder
               formControlName="connection_limit" min="-1">
        <mat-error>{{fieldErrors['connection_limit']}}</mat-error>
      </mat-form-field>
      <mat-form-field appFlex="50%">
        <mat-label i18n>Default pool ID</mat-label>
        <mat-select formControlName="default_pool_id" placeholder="Default pool ID" i18n-placeholder>
          <mat-option [value]="''">
            (none)
          </mat-option>
          <ng-container *ngIf="pools">
            <mat-option *ngFor="let pool of pools.objects" [value]="pool.id">
              {{pool.id}}
            </mat-option>
          </ng-container>
        </mat-select>
      </mat-form-field>
    </div>
    <mat-checkbox formControlName="admin_state_up" color="primary" i18n>Admin state up</mat-checkbox>
  </div>
</form>
