<ng-container *ngIf="spec.renderer">
  <ng-container
    *ngIf="rendererType === 'TEMPLATE'"
    [ngTemplateOutlet]="spec.renderer"
    [ngTemplateOutletContext]="{ $implicit: spec.context }"
  >
  </ng-container>

  <ng-container
    *ngIf="rendererType === 'COMPONENT'"
    [ngComponentOutlet]="spec.renderer"
    [ngComponentOutletInjector]="rendererInjector"
  >
  </ng-container>
</ng-container>

<ng-container *ngIf="!spec.renderer">
  <div class="form-group m-b-8 p-t-8">
    <label>{{ 'Filter text' | translate }}</label>
    <input
      class="form-control"
      [(ngModel)]="defaultRendererFilterText"
      (keyup.enter)="
        spec.context.applyFilter({
          filterPredicate: defaultRendererFilterText
        })
      "
      c8yProductExperience
      [actionName]="'dataGrid:filteringForm:InputTextField'"
    />
  </div>

  <div class="data-grid__dropdown__footer d-flex separator-top">
    <button
      title="{{ 'Reset' | translate }}"
      class="btn btn-default btn-sm flex-grow m-r-8"
      (click)="defaultRendererFilterText = ''; spec.context.resetFilter()"
    >
      {{ 'Reset' | translate }}
    </button>
    <button
      title="{{ 'Apply' | translate }}"
      class="btn btn-primary btn-sm flex-grow"
      (click)="
        spec.context.applyFilter({
          filterPredicate: defaultRendererFilterText
        })
      "
    >
      {{ 'Apply' | translate }}
    </button>
  </div>
</ng-container>