@if (spec.renderer) {
  @if (rendererType === 'TEMPLATE') {
    <ng-container
      [ngTemplateOutlet]="spec.renderer"
      [ngTemplateOutletContext]="{ $implicit: spec.context }"
    ></ng-container>
  }
  @if (rendererType === 'COMPONENT') {
    <ng-container
      [c8yComponentOutlet]="spec.renderer"
      [c8yComponentOutletInjector]="rendererInjector"
    ></ng-container>
  }
}

@if (!spec.renderer) {
  <div class="form-group p-t-8">
    <label>{{ 'Filter text' | translate }}</label>
    <input
      class="form-control"
      [(ngModel)]="defaultRendererFilterText"
      (keyup.enter)="
        spec.context.applyFilter({
          filterPredicate: defaultRendererFilterText
        })
      "
    />
  </div>
  <div class="data-grid__dropdown__footer d-flex separator-top">
    <button
      class="btn btn-default btn-sm flex-grow m-r-8"
      title="{{ 'Reset' | translate }}"
      (click)="defaultRendererFilterText = ''; spec.context.resetFilter()"
    >
      {{ 'Reset' | translate }}
    </button>
    <button
      class="btn btn-primary btn-sm flex-grow"
      title="{{ 'Apply' | translate }}"
      (click)="
        spec.context.applyFilter({
          filterPredicate: defaultRendererFilterText
        })
      "
    >
      {{ 'Apply' | translate }}
    </button>
  </div>
}