@if (layout() === 'dropdown') {
  <div
    class="dropdown"
    style="border: 0; margin-left: -1px"
    container="body"
    #dropdown="bs-dropdown"
    dropdown
    [attr.data-cy]="'global-context--aggregation-picker'"
    [insideClick]="true"
    [isDisabled]="disabled()"
  >
    <button
      class="dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center"
      [attr.aria-label]="currentText() | translate"
      tooltip="{{ (disabled() ? AGGREGATION_TEXTS.disabled : currentText()) | translate }}"
      placement="top"
      container="body"
      [attr.aria-haspopup]="'listbox'"
      [attr.aria-expanded]="dropdown.isOpen"
      type="button"
      [attr.data-cy]="'global-context--aggregation-picker-' + value()"
      [adaptivePosition]="false"
      [delay]="500"
      dropdownToggle
    >
      <i
        class="icon-14"
        [c8yIcon]="currentIcon()"
      ></i>
      <span class="caret m-r-8 m-l-4"></span>
    </button>

    <ul
      class="dropdown-menu dropdown-menu-right--xs"
      role="listbox"
      *dropdownMenu
    >
      @for (aggregation of AVAILABLE_AGGREGATIONS(); track aggregation.id || $index) {
        @let isAutoItem = aggregation.id === AUTO_ITEM_ID;
        @let isDisabled =
          isAutoItem
            ? autoModeDisabled()
            : aggregation.id
              ? disabledAggregations()[aggregation.id]
              : false;
        <li
          [class.active]="
            isAutoItem ? autoModeActive() : !autoModeActive() && aggregation.id === value()
          "
          [class.disabled]="isDisabled"
        >
          <button
            class=""
            [attr.aria-selected]="
              isAutoItem ? autoModeActive() : !autoModeActive() && aggregation.id === value()
            "
            role="option"
            (click)="selectAggregation(aggregation.id); dropdown.isOpen = false"
            [disabled]="isDisabled"
            [attr.data-cy]="'global-context--aggregation-picker-input-' + aggregation.id"
          >
            <i
              class="icon-14"
              [c8yIcon]="
                isAutoItem
                  ? AUTO_ICON
                  : aggregation.id
                    ? AGGREGATION_ICONS[aggregation.id]
                    : AGGREGATION_ICONS.undefined
              "
            ></i>
            <span>{{ aggregation.title | translate }}</span>
          </button>
        </li>
      }
    </ul>
  </div>
}

@if (layout() === 'radio') {
  <div
    class="radio-group d-flex-md a-i-center gap-16"
    [class.flex-wrap]="showAutoMode()"
    [attr.aria-label]="'Aggregation options' | translate"
    role="radiogroup"
  >
    @for (aggregation of AVAILABLE_AGGREGATIONS(); track aggregation.id || $index) {
      @let isAutoItem = aggregation.id === AUTO_ITEM_ID;
      @let isDisabled =
        isAutoItem
          ? autoModeDisabled()
          : aggregation.id
            ? disabledAggregations()[aggregation.id]
            : false;
      @let isChecked =
        isAutoItem ? autoModeActive() : !autoModeActive() && aggregation.id === value();
      <label
        class="c8y-radio"
        [class.disabled]="isDisabled"
        [attr.data-cy]="'global-context--aggregation-picker-input-' + aggregation.id"
      >
        <input
          name="aggregation"
          role="radio"
          type="radio"
          [value]="aggregation.id"
          [checked]="isChecked"
          [disabled]="isDisabled"
          (change)="selectAggregation(aggregation.id)"
        />
        <span></span>
        <i
          class="icon-16 m-l-4"
          [c8yIcon]="
            isAutoItem
              ? AUTO_ICON
              : aggregation.id
                ? AGGREGATION_ICONS[aggregation.id]
                : AGGREGATION_ICONS.undefined
          "
          aria-hidden="true"
        ></i>
        <span>{{ aggregation.title | translate }}</span>
        @if (isAutoItem) {
          <button
            class="btn-help btn-help--sm m-l-4"
            [attr.aria-label]="'Help' | translate"
            [popover]="AUTO_MODE_TOOLTIP | translate"
            placement="top"
            triggers="focus"
            container="body"
            type="button"
            [adaptivePosition]="true"
          ></button>
        }
      </label>
    }

    @if (showAutoMode() && autoModeActive()) {
      <ng-content select="[autoAggregationOptions]"></ng-content>
    }
  </div>
}