<nz-select
  nzShowSearch
  nzServerSearch
  nzAllowClear
  [(ngModel)]="selectedOpt"
  (ngModelChange)="onSelect$.next($event)"
  (nzOnSearch)="onSearch$.next($event)"
  nzPlaceHolder="Search CIViC"
  [nzOptionHeightPx]="28"
  [nzShowArrow]="false"
  [nzDropdownRender]="searchEntities"
  [nzDropdownMatchSelectWidth]="false">
  <nz-option
    *ngFor="let o of (option$ | ngrxPush)"
    nzCustomContent
    [nzValue]="o.result">
    <i
      nz-icon
      style="margin-right: 0.5em"
      nzTheme="twotone"
      [nzTwotoneColor]="converter(o.result.resultType) | entityColor"
      [nzType]="o.result.resultType | iconNameForSubscribableEntity"></i>
    <span innerHTML="{{o.result.name}}"></span>
    <span
      *ngIf="o.result.matchingText"
      nz-typography
      nzType="secondary">
      &mdash;
      <span innerHTML="{{o.result.matchingText}}"></span>
    </span>
  </nz-option>
  <nz-option
    *ngIf="isLoading$ | ngrxPush"
    nzDisabled
    nzCustomContent>
    <i
      nz-icon
      nzType="loading"
      class="loading-icon"></i>
    Loading Data...
  </nz-option>
</nz-select>

<ng-template #searchEntities>
  <hr />
  <nz-checkbox-wrapper (nzOnChange)="selectedEntitiesChanged($event)">
    <div class="entity-select">
      @for(entity of searchableEntities; track entity) {
      <label
        nz-checkbox
        [nzValue]="entity"
        nz-tooltip
        [nzTooltipTitle]="entity"
        [ngModel]="isSelected(entity)">
        <i
          nz-icon
          nzTheme="twotone"
          nzTool
          [nzTwotoneColor]="entity | entityColor"
          [nzType]="entity | iconNameForSubscribableEntity"></i>
      </label>
      }
    </div>
  </nz-checkbox-wrapper>
</ng-template>
