@if (activeDatapoints?.length > 0) {
  <div
    class="dropdown dropup"
    dropdown
    #datapointDropdown="bs-dropdown"
    [cdkTrapFocus]="datapointDropdown.isOpen"
  >
    <ng-template #selectedDatapoint>
      <div class="text-left">
        <strong>{{ selectedDatapointLabel }}</strong>
        <br />
        {{ 'Click to change' | translate }}
      </div>
    </ng-template>
    <button
      class="btn btn-default d-flex a-i-center dropdown-toggle c8y-dropdown"
      title="{{
        'Select a data point to view its aggregated values in the time slider.' | translate
      }}"
      type="button"
      dropdownToggle
    >
      <span
        [style.background-color]="selectedDatapointColor"
        style="display: inline-block; width: 16px; height: 16px; border-radius: 50%"
      ></span>
      <span class="caret"></span>
    </button>
    <ul
      class="dropdown-menu dropdown-menu-right"
      *dropdownMenu
    >
      @for (datapoint of activeDatapoints; track datapoint) {
        <li>
          <button
            class="p-r-8"
            type="button"
            (click)="changeDatapointSelection(datapoint)"
          >
            <span
              class="d-inline-block m-r-4"
              [style.background-color]="datapoint?.color"
              style="width: 16px; height: 16px; border-radius: 50%"
            ></span>
            <span
              class="text-truncate"
              style="max-width: 220px !important"
              title="{{ datapoint | datapointLabel }}"
            >
              {{ datapoint | datapointLabel }}
            </span>
            @if (
              datapoint.__target.id === value?.__target.id &&
              datapoint.fragment === value?.fragment &&
              datapoint.series === value?.series
            ) {
              <span class="m-l-auto flex-no-shrink">
                <i
                  class="text-success h4"
                  [c8yIcon]="'check'"
                ></i>
              </span>
            }
          </button>
        </li>
      }
    </ul>
  </div>
}
<button
  class="btn-help"
  [attr.aria-label]="'Help' | translate"
  popover="{{
    'Select a data point to view its aggregated values in the time slider.' | translate
  }}"
  placement="left"
  triggers="focus"
  container="body"
></button>