@if (toolsetList()?.length) {
  <ul cdkListbox cdkListboxMultiple class="ngm-cdk-listbox" [(ngModel)]="toolsets" [cdkListboxCompareWith]="compareId">
    @for (item of toolsetList(); track item.id) {
      <li
        [cdkOption]="item"
        #option="cdkOption"
        class="ngm-cdk-option flex items-center cursor-pointer px-8 py-3 rounded-md 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>
}