
<form [formGroup]="formGroup">
    <div class="row g-0">
        <div class="col-md-3 me-2 col-10 mb-2">
            <ng-container *ngIf="formGroup.get('input') as control">
                <select class="form-select me-2" formControlName="input">
                    <option *ngFor="let field of availableFields" [value]="field">{{field | filterField}}</option>
                </select>
            </ng-container>
        </div>

        <div class="col-md-2 me-2 col-10 mb-2">
            <select class="col-auto form-select" formControlName="comparison">
                <option *ngFor="let comparison of validComparisons$ | async" [value]="comparison">{{comparison | filterComparison}}</option>
            </select>
        </div>

        <div class="col-md-4 col-10 mb-2">
            <ng-container *ngIf="predicateType$ | async as predicateType">
                <ng-container [ngSwitch]="predicateType">
                    <ng-container *ngSwitchCase="PredicateType.Text">
                        <input type="text" class="form-control  me-2" autocomplete="true" formControlName="filterValue">
                    </ng-container>
                    <ng-container *ngSwitchCase="PredicateType.Number">
                        <input type="number" inputmode="numeric" class="form-control  me-2" formControlName="filterValue">
                    </ng-container>
                    <ng-container *ngSwitchCase="PredicateType.Dropdown">
                      <ng-container *ngIf="dropdownOptions$ | async as opts">
                          <ng-container *ngTemplateOutlet="dropdown; context: { options: opts, multipleAllowed: MultipleDropdownAllowed }"></ng-container>
                          <ng-template #dropdown let-options="options" let-multipleAllowed="multipleAllowed">
                              <select2 [data]="options"
                                       formControlName="filterValue"
                                       [multiple]="multipleAllowed"
                                       [infiniteScroll]="true"
                                       [resettable]="true">
                              </select2>
                          </ng-template>
                      </ng-container>
                    </ng-container>
                </ng-container>
            </ng-container>
        </div>

        <ng-content #removeBtn></ng-content>
    </div>
</form>
