<div [formGroup]="formGroup">
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Type' | translate }}</legend>
    <c8y-form-group class="p-t-4 form-group-sm">
      <div style="position: relative">
        <input
          class="form-control"
          [style.padding-right]="typeValue() ? '32px' : null"
          formControlName="type"
          [placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_LocationUpdate' }"
        />
        @if (typeValue()) {
          <button
            class="btn btn-clean"
            style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%)"
            [title]="'Clear' | translate"
            type="button"
            (click)="clearType()"
          >
            <i c8yIcon="times"></i>
          </button>
        }
      </div>
    </c8y-form-group>
  </fieldset>
  <fieldset
    class="c8y-fieldset"
    data-cy="c8y-event-list-widget-config--child-devices-section"
  >
    <legend>{{ 'Child devices' | translate }}</legend>
    <c8y-form-group class="m-b-8">
      <label
        class="c8y-switch"
        [title]="'Show events from child devices' | translate"
        data-cy="c8y-event-list-widget-config--child-devices-label"
      >
        <input
          type="checkbox"
          formControlName="showEventsForChildren"
          data-cy="c8y-event-list-widget-config--showEventsForChildren-checkbox"
        />
        <span></span>
        <span>{{ 'Show events' | translate }}</span>
        <span class="sr-only">{{ 'Show events' | translate }}</span>
      </label>
    </c8y-form-group>
  </fieldset>
</div>

<ng-template #eventListPreview>
  @let previewDisplayMode = configState()?.displayMode;
  @if (previewDisplayMode && previewDisplayMode !== 'dashboard') {
    <c8y-local-controls
      [controls]="controls"
      [displayMode]="previewDisplayMode"
      [config]="{
        dateTimeContext: configState()?.dateTimeContext,
        aggregation: configState()?.aggregation,
        isAutoRefreshEnabled: configState()?.isAutoRefreshEnabled,
        refreshInterval: configState()?.refreshInterval,
        refreshOption: configState()?.refreshOption
      }"
      [disabled]="true"
    ></c8y-local-controls>
  }
  <c8y-events-list
    [events]="events()"
    [isLoading]="isLoading()"
    [navigationOptions]="navigationOptions"
  ></c8y-events-list>
</ng-template>