<div
  class="dropdown"
  style="border: 0; margin-left: -1px"
  #dropdown="bs-dropdown"
  dropdown
  [insideClick]="true"
  [isDisabled]="disabled"
>
  @let toggleText =
    autoModeActive()
      ? autoPoints() != null
        ? ((autoKeepPointCount() ? AUTO_POINTS_TOOLTIP_KEPT : AUTO_POINTS_TOOLTIP)
          | translate: { points: autoPoints() })
        : (AUTO_LABEL | translate)
      : value
        ? (AGGREGATION_TEXTS[value] | translate)
        : (AGGREGATION_TEXTS.undefined | translate);
  <button
    class="dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center"
    [attr.aria-label]="toggleText"
    [tooltip]="disabled ? (AGGREGATION_TEXTS.disabled | translate) : toggleText"
    placement="top"
    container="body"
    type="button"
    [adaptivePosition]="false"
    [delay]="500"
    dropdownToggle
  >
    <i
      class="m-r-8"
      [c8yIcon]="
        autoModeActive()
          ? AUTO_ICON
          : value
            ? AGGREGATION_ICONS[value]
            : AGGREGATION_ICONS.undefined
      "
    ></i>
    <div class="d-col text-left fit-w">
      <span class="text-muted fit-w text-10 l-h-1">
        {{ 'Aggregation' | translate }}
      </span>
      <span class="text-bold text-12 fit-w l-h-1 d-flex a-i-center gap-4">
        @if (autoModeActive()) {
          <span class="text-truncate">{{ AUTO_LABEL | translate }}</span>
          @if (autoPoints() != null) {
            <span
              class="m-l-auto badge badge-info flex-no-shrink l-h-1 text-10"
              style="min-height: 12px"
            >
              {{ autoPoints() }}
            </span>
          }
        } @else {
          <span class="text-truncate">
            {{ (value ? AGGREGATION_LABELS[value] : AGGREGATION_LABELS.NONE) | translate }}
          </span>
        }
      </span>
    </div>
    <span class="caret m-r-8 m-l-4 flex-no-shrink"></span>
  </button>

  <ul
    class="dropdown-menu dropdown-menu-right--xs"
    *dropdownMenu
    cdkTrapFocus
    [cdkTrapFocusAutoCapture]="true"
  >
    @for (aggregation of AGGREGATIONS; track aggregation.id) {
      <li
        [ngClass]="{
          active: !autoModeActive() && aggregation.id === value,
          disabled: aggregation.id ? disabledAggregations[aggregation.id] : false
        }"
      >
        <button
          class=""
          (click)="selectAggregation(aggregation.id); dropdown.isOpen = false"
          [disabled]="aggregation.id ? disabledAggregations[aggregation.id] : false"
        >
          <i
            class="icon-14"
            [c8yIcon]="
              aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined
            "
          ></i>
          <span>{{ aggregation.title | translate }}</span>
        </button>
      </li>
    }

    @if (showAutoMode()) {
      <li [class.active]="autoModeActive()">
        <button
          class=""
          (click)="selectAggregation(AUTO_ITEM_ID)"
        >
          <i
            class="icon-14"
            [c8yIcon]="AUTO_ICON"
          ></i>
          <span>{{ AUTO_LABEL | translate }}</span>
        </button>
      </li>

      <div
        class="p-t-8 p-b-8 p-l-16 p-r-16 separator-top"
        [collapse]="!autoModeActive()"
        [isAnimated]="true"
      >
        <ng-content select="[autoAggregationOptions]"></ng-content>
      </div>
    }
  </ul>
</div>