<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"
    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-4"
      c8yIcon="list"
    ></i>
    <div class="d-col text-left fit-w">
      <span class="text-12">
        {{ 'Configuration' | translate }}
      </span>
      <span class="text-10 text-muted text-truncate">
        {{ currentConfiguration.label }}
      </span>
    </div>
    <span class="caret m-r-16 m-l-4"></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">
          <c8y-li
            class="p-0"
            *ngFor="
              let configuration of configurationsFormGroup.controls.configurations['controls'];
              let i = index
            "
            [dense]="true"
          >
            <c8y-li-radio
              [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="flex-grow min-width-0"
                [formGroupName]="i"
              >
                <label
                  class="editable"
                  [ngClass]="{
                    updated:
                      configuration.controls.label.touched && configuration.controls.label.dirty
                  }"
                >
                  <input
                    class="form-control"
                    [style.width.ch]="configuration.value.label || 25"
                    [attr.aria-label]="'Configuration label' | translate"
                    placeholder="{{ 'Configuration 1' | translate }}"
                    type="text"
                    autocomplete="off"
                    required
                    formControlName="label"
                    (blur)="updateConfigurationLabel(configuration.value)"
                  />
                </label>
              </div>
              <div class="flex-nogrow d-flex gap-8">
                <button
                  class="btn-dot btn"
                  [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"
          (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>