<div [formGroup]="formGroup">
  <fieldset class="c8y-fieldset">
    <legend translate>Type</legend>
    <c8y-form-group>
      <div class="p-relative">
        <input
          class="form-control"
          [class.p-r-32]="typeValue()"
          formControlName="type"
          [placeholder]="'e.g. c8y_LocationUpdate' | translate"
        />
        @if (typeValue()) {
          <button
            class="btn btn-clean p-absolute top-0 right-0 fit-h m-r-8"
            [title]="'Clear' | translate"
            [attr.aria-label]="'Clear' | translate"
            type="button"
            (click)="clearType()"
          >
            <i
              c8yIcon="times"
              aria-hidden="true"
            ></i>
          </button>
        }
      </div>
    </c8y-form-group>
  </fieldset>
  <fieldset
    class="c8y-fieldset"
    data-cy="c8y-event-image-view-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-image-view-widget-config--child-devices-label"
      >
        <input
          type="checkbox"
          formControlName="showEventsForChildren"
          data-cy="c8y-event-image-view-widget-config--showEventsForChildren-checkbox"
        />
        <span></span>
        <span>{{ 'Show events' | translate }}</span>
      </label>
    </c8y-form-group>
  </fieldset>
  <fieldset class="c8y-fieldset">
    <legend translate>Slideshow</legend>
    <c8y-form-group class="m-b-8">
      <div class="d-flex a-i-center gap-8">
        <label class="c8y-switch m-0">
          <input
            type="checkbox"
            formControlName="slideshowLoop"
          />
          <span></span>
          <span translate>Play in loop</span>
        </label>
        <button
          class="btn-help btn-help--sm"
          [attr.aria-label]="'Help' | translate"
          [popover]="SLIDESHOW_HELP_TEXT | translate"
          placement="right"
          triggers="focus"
          container="body"
          type="button"
        ></button>
      </div>
    </c8y-form-group>
  </fieldset>
</div>

<ng-template #imageViewPreview>
  <div class="d-col fit-h gap-16">
    @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-event-image-view
      [events]="events()"
      [isLoading]="isLoading()"
      [historyMode]="isHistoryMode()"
      [slideshowLoop]="formGroup.controls.slideshowLoop.value ?? false"
    ></c8y-event-image-view>
  </div>
</ng-template>