<ng-template #headerContent>
  <div
    class="c8y-header-controls-group"
    [class.c8y-header-controls-group--has-summary]="!isLinked()"
  >
    <button
      class="btn-icon-dot-set"
      [class.active]="isLinked()"
      [attr.aria-label]="'Global context sync controls' | translate"
      [tooltip]="masterTooltipTemplate"
      delay="500"
      container="body"
      (click)="toggle.emit(!isLinked())"
      data-cy="global-context-link--all"
    >
      <span class="btn-icon-dot__item default" [class.active]="isLinked()">
        <i [c8yIcon]="isLinked() ? 'link' : 'unlink'"></i>
      </span>
      @for (control of visibleControls(); track control.stateKey) {
        @if (isLinked()) {
          <span
            [class]="control.cssClass + ' btn-icon-dot__item active'"
            [attr.data-cy]="'global-context-link--' + control.stateKey"
          >
            <i [c8yIcon]="control.icon"></i>
          </span>
        }
      }
    </button>
    @if (!isLinked()) {
      <c8y-context-controls
        class="c8y-header-controls-group__summary"
        [controls]="controls()"
        [displayMode]="displayMode()"
        [config]="config()"
        [isLoading]="isLoading()"
        [emitRefresh]="emitRefresh()"
        (configChange)="configChange.emit($event)"
        (refresh)="refresh.emit()"
      ></c8y-context-controls>
    }
  </div>
  <ng-template #masterTooltipTemplate>{{ masterTooltipText() }}</ng-template>
</ng-template>