<span class="m-l-auto d-flex">
  <button
    *ngIf="config.displaySettings.globalAggregationContext"
    type="button"
    class="btn btn-clean btn-no-focus"
    [attr.aria-label]="'Aggregation' | translate"
    tooltip="{{
      (config?.aggregation ? AGGREGATION_TEXTS[config.aggregation] : AGGREGATION_TEXTS.undefined)
        | translate
    }}"
    [adaptivePosition]="false"
    placement="top"
    container="body"
  >
    <i
      [c8yIcon]="
        config?.aggregation ? AGGREGATION_ICONS[config.aggregation] : AGGREGATION_ICONS.undefined
      "
      class="icon-14"
    ></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="c8y-icon-badge d-inline-flex">
      <i c8yIcon="clock"></i>
      <span class="badge badge-success">
        <i
          c8yIcon="link"
        ></i>
      </span>
    </span>
  </button>
</span>