<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)" [popperOptions]="popperOptions">
  <button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
    <i-bs name="{{icon}}"></i-bs><div class="d-none d-sm-inline ms-1">{{title}}</div>
    @if (!editing && selectionModel.totalCount > 0) {
      <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
    }
  </button>
  <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
    <div class="list-group list-group-flush">
      @if (!editing && manyToOne) {
        <div class="list-group-item d-flex">
          <div class="btn-group btn-group-xs flex-fill" role="group">
            <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorAnd_{{name}}" name="logicalOperatorAnd_{{name}}" value="and">
            <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{name}}" i18n>All</label>
            <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorOr_{{name}}" name="logicalOperatorOr_{{name}}" value="or">
            <label class="btn btn-outline-primary" for="logicalOperatorOr_{{name}}" i18n>Any</label>
          </div>
        </div>
      }
      @if (!editing && !manyToOne) {
        <div class="list-group-item d-flex">
          <div class="btn-group btn-group-xs flex-fill" role="group">
            <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionInclude_{{name}}" name="intersectionInclude_{{name}}" value="include">
            <label class="btn btn-outline-primary" for="intersectionInclude_{{name}}" i18n>Include</label>
            <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionExclude_{{name}}" name="intersectionExclude_{{name}}" value="exclude">
            <label class="btn btn-outline-primary" for="intersectionExclude_{{name}}" i18n>Exclude</label>
          </div>
        </div>
      }
      <div class="list-group-item">
        <div class="input-group input-group-sm">
          <input class="form-control" type="text" spellcheck="false" [(ngModel)]="filterText" [placeholder]="filterPlaceholder" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
        </div>
      </div>
      @if (selectionModel.items) {
        <cdk-virtual-scroll-viewport class="items" [itemSize]="FILTERABLE_BUTTON_HEIGHT_PX" #buttonsViewport [style.height.px]="scrollViewportHeight">
          <div *cdkVirtualFor="let item of selectionModel.items | filter: filterText:'name'; trackBy: trackByItem; let i = index">
            @if (allowSelectNone || item.id) {
              <pngx-toggleable-dropdown-button
                [item]="item"
                [hideCount]="hideCount(item)"
                [opacifyCount]="!editing"
                [state]="selectionModel.get(item.id)"
                [count]="getUpdatedDocumentCount(item.id)"
                (toggled)="selectionModel.toggle(item.id)"
                (exclude)="excludeClicked(item.id)"
                [disabled]="disabled">
              </pngx-toggleable-dropdown-button>
            }
          </div>
        </cdk-virtual-scroll-viewport>
      }
      @if (editing) {
        @if ((selectionModel.items | filter: filterText:'name').length === 0 && createRef !== undefined) {
          <button class="list-group-item list-group-item-action bg-light" (click)="createClicked()" [disabled]="disabled">
            <small class="ms-2"><ng-container i18n>Create</ng-container> "{{filterText}}"</small>
            <i-bs width="1.5em" height="1em" name="plus"></i-bs>
          </button>
        }
        @if ((selectionModel.items | filter: filterText:'name').length > 0) {
          <button class="list-group-item list-group-item-action bg-light d-flex align-items-center" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
            <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
            <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
          </button>
        }
      }
      @if (extraButtonTitle) {
        <button class="list-group-item list-group-item-action bg-light d-flex align-items-center" (click)="extraButtonClicked($event)" [disabled]="disabled">
          <small class="ms-2 fw-bold">{{extraButtonTitle}}</small>
          <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
        </button>
      }
      @if (!editing && manyToOne) {
        <div class="list-group-item list-group-item-note pt-1 pb-2">
          <small i18n>Click again to exclude items.</small>
        </div>
      }
    </div>
  </div>
</div>
