<form class="d-flex gap-16 h-auto min-width-0 widget-controls" [formGroup]="form">
  <div class="input-group w-auto min-width-0">
    @if (visibleControls()?.includes('aggregation')) {
      <c8y-aggregation-picker
        data-cy="global-inline-date-context--Aggregation-display"
        formControlName="aggregation"
        [disabledAggregations]="disabledAggregations()"
        [autoModeActive]="isAutoModeActive()"
        [showAutoMode]="
          visibleControls()?.includes('autoAggregation') && isTimeSeriesMigrated()
        "
        [resetToDefault]="true"
        (autoModeChange)="onAutoModeChange($event)"
      >
      </c8y-aggregation-picker>
    }

    @if (visibleControls()?.includes('autoRefresh')) {
      <c8y-auto-refresh-control
        formControlName="isAutoRefreshEnabled"
        [autoRefreshSeconds]="autoRefreshSeconds()"
        [isLoading]="isLoading()"
        (refresh)="onAutoRefresh()"
      >
      </c8y-auto-refresh-control>
    }

    @if (visibleControls()?.includes('time')) {
      <c8y-date-time-context-picker
        class="min-width-0"
        style="margin-left: -1px"
        formControlName="dateTimeContext"
        [config]="dateTimePickerConfig()"
        [intervalOptions]="intervalOptions()"
      >
      </c8y-date-time-context-picker>
    }

    @if (visibleControls()?.includes('refresh')) {
      <div class="input-group-btn">
        <button
          class="btn btn-default"
          [attr.aria-label]="'Refresh' | translate"
          [tooltip]="'Refresh' | translate"
          placement="bottom"
          container="body"
          type="button"
          [delay]="500"
          [disabled]="isLoading()"
          (click)="onRefresh()"
          data-cy="widget-controls--refresh-button"
        >
          <i [class.icon-spin]="isLoading()" [c8yIcon]="'refresh'"></i>
        </button>
      </div>
    }
  </div>
</form>