<form>
  <fieldset class="c8y-fieldset">
    <legend>
      {{ 'Time context' | translate }}
      <button
        class="btn-help btn-help--sm"
        [attr.aria-label]="'Help' | translate"
        [popover]="
          'Sync with dashboard settings or set independent time controls for this widget.'
            | translate
        "
        placement="right"
        triggers="focus"
        container="body"
        type="button"
        [adaptivePosition]="true"
      ></button>
    </legend>
    <c8y-config-context-selector
      [formControl]="displayModeControl"
    ></c8y-config-context-selector>
  </fieldset>
</form>

@if (displayMode() !== GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD) {
  <fieldset class="c8y-fieldset p-l-0 p-r-0 p-t-16">
    <legend class="m-l-16">{{ 'Widget time context' | translate }}</legend>
    <c8y-configuration-controls
      [settings]="settings()"
      [controlsDisplayMode]="'horizontal'"
      [tabsOutletName]="'verticalTabOutletForConfigurationModes'"
      [activeMode]="refreshOption()"
      [liveContext]="liveState()"
      [historyContext]="historyState()"
      [supportedModes]="supportedModes()"
      [intervalOptions]="intervalOptions()"
      (contextChange)="onConfigurationChange($event)"
      (refreshOptionChange)="onRefreshOptionChange($event)"
    ></c8y-configuration-controls>
  </fieldset>
}