<form *ngIf="createOptions" appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="policyForm">
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="policyForm"></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="50%">
        <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 appFlex="50%">
        <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>
    <div layoutDirection="row" layoutDirection-xs="column" appLayoutGap="10px">
      <mat-form-field appFlex="50%">
        <mat-label i18n>Action</mat-label>
        <mat-select formControlName="action" placeholder="Action" i18n-placeholder required>
          <mat-option *ngFor="let action of createOptions.policy_actions | keyvalue" [value]="action.key">
            {{action.value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field *ngIf="policyForm.controls.action.value === 'REDIRECT_TO_POOL'" appFlex="50%">
        <mat-label i18n>Redirect pool ID</mat-label>
        <mat-select formControlName="redirect_pool_id" placeholder="Redirect pool ID" i18n-placeholder required>
          <ng-container *ngIf="pools">
            <mat-option *ngFor="let pool of pools.objects" [value]="pool.id">
              <ng-container *ngIf="pool.name;else noName">
                {{pool.name}}({{pool.id}})
              </ng-container>
              <ng-template #noName>
                {{pool.id}}
              </ng-template>
            </mat-option>
          </ng-container>
        </mat-select>
      </mat-form-field>
      <mat-form-field *ngIf="policyForm.controls.action.value === 'REDIRECT_TO_URL'" appFlex="50%">
        <mat-label i18n>Redirect URL</mat-label>
        <input matInput placeholder="Redirect URL" i18n-placeholder type="text" formControlName="redirect_url" required>
        <mat-error>{{fieldErrors['redirect_url']}}</mat-error>
      </mat-form-field>
    </div>
    <mat-form-field appFlex="50%">
      <mat-label i18n>Position</mat-label>
      <input matInput type="number" placeholder="Position" i18n-placeholder
             formControlName="position" min="0">
      <mat-error>{{fieldErrors['position']}}</mat-error>
    </mat-form-field>
    <mat-checkbox formControlName="admin_state_up" color="primary" i18n>Admin state up</mat-checkbox>
  </div>
</form>
