@for (knowledge of knowledges(); track knowledge) {
  <div cdkMenuItem class="ngm-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"
    >
    <!-- <pac-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">
    {{ 'PAC.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'
    },
  ]"
>
  <pac-knowledgebase-card [knowledgebase]="knowledgebase()" class="knowledgebase-tip-card w-96 bg-components-card-bg " />
</ng-template>