<div class="mb-3 paperless-input-select" [class.disabled]="disabled">
  <label *ngIf="title" class="form-label" [for]="inputId">{{title}}</label>
    <div [class.input-group]="allowCreateNew || showFilter">
      <ng-select name="inputId" [(ngModel)]="value"
        [disabled]="disabled"
        [style.color]="textColor"
        [style.background]="backgroundColor"
        [class.private]="isPrivate"
        [clearable]="allowNull"
        [items]="items"
        [addTag]="allowCreateNew && addItemRef"
        addTagText="Add item"
        i18n-addTagText="Used for both types, correspondents, storage paths"
        [placeholder]="placeholder"
        [multiple]="multiple"
        [bindLabel]="bindLabel"
        bindValue="id"
        (change)="onChange(value)"
        (search)="onSearch($event)"
        (focus)="clearLastSearchTerm()"
        (clear)="clearLastSearchTerm()"
        (blur)="onBlur()">
      </ng-select>
      <button *ngIf="allowCreateNew" class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
        <svg class="buttonicon" fill="currentColor">
          <use xlink:href="assets/bootstrap-icons.svg#plus" />
        </svg>
      </button>
      <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
        <svg class="buttonicon" fill="currentColor">
          <use xlink:href="assets/bootstrap-icons.svg#filter" />
        </svg>
      </button>
    </div>
  <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
  <small *ngIf="getSuggestions().length > 0">
    <span i18n>Suggestions:</span>&nbsp;
    <ng-container *ngFor="let s of getSuggestions()">
      <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
    </ng-container>


  </small>
</div>
