<div>
  @if (useControls) {
    <c8y-config-mode-controls
      [controls]="controls"
      [config]="widgetConfigService.currentConfig$ | async"
      (configChange)="onConfigChange($event)"
    ></c8y-config-mode-controls>
  } @else if (widgetControls) {
    <c8y-global-context-widget-wrapper
      [widgetControls]="widgetControls"
      [displayMode]="'config'"
      [config]="widgetConfigService.currentConfig$ | async"
      (globalContextChange)="onGlobalContext($event)"
    ></c8y-global-context-widget-wrapper>
  }
</div>

<c8y-widget-config-feedback>
  <span class="tag tag--info chip text-12">
    @if (widgetConfigService.currentConfig.displayMode === 'config') {
      <span
        class="text-truncate"
        [title]="'The time context can only get changed in the configuration.' | translate"
        translate
      >
        Configuration
      </span>
    }
    @if (widgetConfigService.currentConfig.displayMode === 'dashboard') {
      <span
        [title]="'The widget is bound to the global time context.' | translate"
        translate
      >
        Dashboard
      </span>
    }
    @if (
      widgetConfigService.currentConfig.displayMode === 'view_and_config' ||
      widgetConfigService.currentConfig.displayMode === 'config'
    ) {
      <span
        [title]="'The time context can be configured in the widget view mode.' | translate"
        translate
      >
        Configuration and widget view
      </span>
    }
  </span>
</c8y-widget-config-feedback>