<div
  class="dropdown dropup"
  dropdown
  #datapointDropdown="bs-dropdown"
  [cdkTrapFocus]="datapointDropdown.isOpen"
  *ngIf="activeDatapoints?.length > 0"
>
  <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
  >
    <li *ngFor="let datapoint of activeDatapoints">
      <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?.label || `${datapoint?.fragment}-${datapoint?.series}` }}">
          {{ datapoint?.label || `${datapoint?.fragment}-${datapoint?.series}` }}
        </span>
        <span
          class="m-l-auto flex-no-shrink"
          *ngIf="
            datapoint.__target.id === value?.__target.id &&
            datapoint.fragment === value?.fragment &&
            datapoint.series === value?.series
          "
        >
          <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>