@if (!silent) {
  <div
    class="dropdown"
    #actionbar_dropdown="bs-dropdown"
    [cdkTrapFocus]="actionbar_dropdown.isOpen"
    dropdown
    [insideClick]="true"
  >
    <button
      class="dropdown-toggle form-control l-h-tight d-flex a-i-center"
      style="max-width: 240px"
      [attr.aria-label]="currentConfiguration?.label"
      tooltip="{{ 'Selected configuration' | translate }}"
      placement="top"
      container="body"
      data-cy="current-configuration-dropdown-button"
      [adaptivePosition]="false"
      [delay]="500"
      dropdownToggle
    >
      <i
        class="m-r-8"
        c8yIcon="list"
      ></i>
      <div class="d-col text-left fit-w min-width-0">
        <span class="text-muted fit-w text-10 l-h-1">
          {{ 'Configuration' | translate }}
        </span>
        <span class="text-bold text-12 fit-w l-h-1 text-truncate">
          {{ currentConfiguration?.label }}
        </span>
      </div>
      <span class="caret m-r-16 m-l-4 flex-no-shrink"></span>
    </button>
    <div
      class="dropdown-menu dropdown-menu-wide dropdown-menu-action-bar"
      *dropdownMenu
    >
      <div class="sticky-top separator-bottom p-t-8 p-b-8 p-l-16 p-r-16">
        <p>
          <strong>{{ 'Data explorer configurations' | translate }}</strong>
        </p>
        <p>
          <small>{{ 'Easily switch and manage configurations.' | translate }}</small>
        </p>
      </div>
      <c8y-list-group class="no-border-last">
        <form [formGroup]="configurationsFormGroup">
          <div formArrayName="configurations">
            @for (
              configuration of configurationsFormGroup.controls.configurations['controls'];
              track $index
            ) {
              <c8y-li
                class="p-0"
                [dense]="true"
              >
                <c8y-li-radio
                  style="min-height: 48px"
                  [selected]="configuration.value.id === currentConfiguration.id"
                  (onSelect)="changeConfiguration($event, configuration.value)"
                ></c8y-li-radio>

                <div class="d-flex a-i-center gap-8">
                  <div
                    class="min-width-0 flex-grow"
                    [formGroupName]="$index"
                  >
                    <c8y-input-group-editable
                      formGroupClass="m-b-0"
                      size="sm"
                      [ariaLabel]="'Configuration label' | translate"
                      [placeholder]="'Configuration 1' | translate"
                      formControlName="label"
                      [validators]="labelValidators"
                      (save)="updateConfigurationLabel({ ...configuration.value, label: $event })"
                    ></c8y-input-group-editable>
                  </div>

                  <div class="m-l-auto flex-nogrow d-flex gap-8">
                    <button
                      class="btn-dot btn m-0"
                      [attr.aria-label]="'Duplicate configuration' | translate"
                      tooltip="{{ 'Duplicate configuration' | translate }}"
                      placement="left"
                      (click)="addConfig(configuration.value.config)"
                      [delay]="500"
                    >
                      <i c8yIcon="copy"></i>
                    </button>

                    <button
                      class="btn-dot btn btn-dot--danger"
                      [attr.aria-label]="'Remove configurations' | translate"
                      tooltip="{{
                        (configuration.value.id === currentConfiguration.id
                          ? activeConfigTooltip
                          : removeConfigTooltip
                        ) | translate
                      }}"
                      placement="left"
                      [delay]="500"
                      (click)="$event.stopPropagation(); deleteConfiguration(configuration.value)"
                      [disabled]="configuration.value.id === currentConfiguration.id"
                    >
                      <i c8yIcon="minus-circle"></i>
                    </button>
                  </div>
                </div>
              </c8y-li>
            }
          </div>
        </form>
      </c8y-list-group>
      <div class="sticky-bottom separator-top">
        <div class="d-flex p-l-16 p-r-16 p-t-8 p-b-8">
          <button
            class="btn btn-danger btn-sm flex-grow m-r-4"
            (click)="clearAll()"
            [disabled]="configurations.length < 2"
          >
            <i [c8yIcon]="'delete'"></i>
            {{ 'Delete all configurations' | translate }}
          </button>
          <button
            class="btn btn-default btn-sm flex-grow"
            type="button"
            (click)="addConfig()"
          >
            <i [c8yIcon]="'add-circle-outline'"></i>
            {{ 'Add configuration' | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
}