<form *ngIf="createOptions" appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="ruleForm">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="ruleForm"></app-form-errors>
  <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
  <div layoutDirection="column">
    <mat-checkbox formControlName="invert" color="primary" i18n>Invert</mat-checkbox>
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="50%">
        <mat-label i18n>Type</mat-label>
        <mat-select formControlName="type" placeholder="Type" i18n-placeholder required>
          <mat-option *ngFor="let type of createOptions.rule_types | keyvalue" [value]="type.key">
            {{type.value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field *ngIf="['HEADER','COOKIE'].includes(ruleForm.controls.type.value)" appFlex="50%">
        <mat-label i18n>Key</mat-label>
        <input matInput placeholder="Key" i18n-placeholder type="text" formControlName="key">
        <mat-error>{{fieldErrors['key']}}</mat-error>
      </mat-form-field>
    </div>
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="50%">
        <mat-label i18n>Compare type</mat-label>
        <mat-select formControlName="compare_type" placeholder="Compare type" i18n-placeholder required>
          <mat-option *ngFor="let compare_type of createOptions.rule_compare_types | keyvalue" [value]="compare_type.key">
            {{compare_type.value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field appFlex="50%">
        <mat-label i18n>Value</mat-label>
        <input matInput placeholder="Value" i18n-placeholder type="text" formControlName="value">
        <mat-error>{{fieldErrors['value']}}</mat-error>
      </mat-form-field>
    </div>
    <mat-checkbox formControlName="admin_state_up" color="primary" i18n>Admin state up</mat-checkbox>
  </div>
</form>
