<p-select
  [inputId]="inputId()"

  [options]="items()"

  [(ngModel)]="selectedId"
  (ngModelChange)="onModelChange()"

  optionValue="id"

  [showClear]="clearable()"

  [filter]="filter()"
  filterBy="label"

  i18n-filterPlaceholder filterPlaceholder="Search"
  i18n-emptyFilterMessage emptyFilterMessage="No results found"
  i18n-emptyMessage emptyMessage="No items available"

  [virtualScroll]="virtualScroll()"
  [virtualScrollItemSize]="virtualScrollItemSize()"

  fluid="true"
>
  <ng-template #itemTemplate let-item let-description="description">
    @if (customItemTemplate) {
      <ng-template [ngTemplateOutlet]="customItemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
    } @else {
      <div>
        <div class="d-flex align-items-center item-label custom-item">
          <img *ngIf="item.imageUrl" alt="" class="me-2" [src]="item.imageUrl" />

          <span class="ellipsis" [ngClass]="item.classes">{{ item.label }}</span>
        </div>

        <span *ngIf="description" class="muted">{{ description }}</span>
      </div>
    }
  </ng-template>

  <ng-template #selectedItem>
    <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: getSelectedItem() }"></ng-template>
  </ng-template>

  <ng-template let-item #item>
    <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, description: item.description }"></ng-template>
  </ng-template>
</p-select>
