@if (knowledgebaseList()?.length) {
  <ul
    cdkListbox
    cdkListboxMultiple
    class="ngm-cdk-listbox"
    [(ngModel)]="knowledgebases"
    [cdkListboxCompareWith]="compareId"
  >
    @for (item of knowledgebaseList(); track item.id) {
      <li
        [cdkOption]="item"
        #option="cdkOption"
        class="ngm-cdk-option flex items-center cursor-pointer rounded-lg hover:bg-hover-bg"
        [class.cdk-option-selected]="option.isSelected()"
        [cdkOptionDisabled]="disabled()"
      >
        <emoji-avatar [avatar]="item.avatar" small class="shrink-0 mr-2 rounded-lg overflow-hidden" />
        <span class="whitespace-nowrap text-ellipsis overflow-hidden" [title]="item.name">{{ item.name }}</span>

        @if (option.isSelected()) {
          <z-icon class="absolute right-1" color="accent" zType="check_small"></z-icon>
        }
      </li>
    }
  </ul>
}