@for (knowledge of knowledges(); track knowledge) {
  <div
    cdkMenuItem
    class="xp-cdk-menu-item shrink-0 w-full flex justify-start items-center px-1 py-0.5"
    (click)="createKnowledge(knowledge)"
    (mouseover)="openTooltip(knowledge, overlayTrigger)"
    (mouseout)="detailOpen.set(false)"
    cdkOverlayOrigin
    #overlayTrigger="cdkOverlayOrigin"
  >
    <!-- <xp-avatar [avatar]="knowledge.avatar" class="shrink-0 mr-2 w-6 h-6 overflow-hidden rounded-full" /> -->
    <emoji-avatar [avatar]="knowledge.avatar" small class="shrink-0 rounded-md overflow-hidden shadow-sm mr-2" />
    <div class="flex flex-col">
      <span>{{ knowledge.name }}</span>
    </div>
  </div>
} @empty {
  <div class="p-2">
    {{ 'XP.Xpert.NoKnowledgebase' | translate: { Default: 'No Knowledgebase' } }}
  </div>
}

<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayGrowAfterOpen
  [cdkConnectedOverlayOrigin]="detailTrigger()"
  [cdkConnectedOverlayOpen]="detailOpen()"
  [cdkConnectedOverlayOffsetX]="10"
  [cdkConnectedOverlayPositions]="[
    {
      originX: 'end',
      originY: 'top',
      overlayX: 'start',
      overlayY: 'top'
    }
  ]"
>
  <xp-knowledgebase-card [knowledgebase]="knowledgebase()" class="knowledgebase-tip-card w-96 bg-components-card-bg" />
</ng-template>