<span class="m-l-auto d-flex">
  <button
    class="btn btn-clean btn-no-focus"
    [attr.aria-label]="'Aggregation' | translate"
    tooltip="{{
      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)
        | translate
    }}"
    placement="top"
    container="body"
    type="button"
    *ngIf="config.displaySettings.globalAggregationContext"
    [adaptivePosition]="false"
  >
    <i
      class="icon-14"
      [c8yIcon]="
        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined
      "
    ></i>
  </button>
  <button
    class="btn c8y-realtime btn-no-focus"
    [attr.aria-label]="(config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate"
    tooltip="{{ (config?.realtime ? 'Realtime active' : 'Realtime inactive') | translate }}"
    placement="top"
    container="body"
    type="button"
  >
    <span
      class="c8y-pulse m-0"
      [ngClass]="{ active: config?.realtime, inactive: !config?.realtime }"
    ></span>
  </button>
  <button
    class="btn btn-clean btn-no-focus p-l-4 p-r-0"
    [attr.aria-label]="globalContextButtonText | translate"
    [tooltip]="globalContextButtonText | translate"
    placement="top"
    container="body"
    data-cy="dashboard-child--global-date-context-indicator"
  >
    <span class="tag tag--success chip">
      <i c8yIcon="clock"></i>
      {{ 'Realtime' | translate }}
    </span>
  </button>
</span>