@if (!knowledgebases()?.length) {
  <div
    class="rounded-3xl border text-card-foreground bg-transparent flex-1 flex flex-col items-center justify-center p-4 gap-4 mb-4 mt-4"
  >
    <div class="bg-components-card-bg flex flex-col justify-center items-center rounded-full w-14 h-14">
      <span class="text-text-secondary">
        <i class="ri-book-shelf-line text-2xl"></i>
      </span>
    </div>
    <div class="flex flex-col gap-1 items-center text-center">
      <h3 class="font-semibold text-lg">
        {{ 'PAC.XProject.NoKnowledgebasesYet' | translate: { Default: 'No knowledgebases yet' } }}
      </h3>
      <span class="text-text-secondary max-w-md">
        {{
          'PAC.XProject.AddKnowledgebasesForProject'
            | translate: { Default: 'Select to bind a workspace to add knowledgebases to the project general agent' }
        }}
      </span>
    </div>
  </div>
}

@if (workspace()) {
  <div
    @listEnterAnimation
    class="relative content-start gap-4 pt-2 pb-4 px-1 my-4 grow shrink-0"
    ngmDynamicGrid
    colWidth="280"
    box="content-box"
  >
    @for (toolset of knowledgebases(); track toolset.id) {
      <knowledgebase-card [knowledgebase]="toolset" inline class="group/card bg-components-card-bg">
        <button
          action
          type="button"
          class="btn rounded-xl justify-center w-8 h-8 danger opacity-0 group-hover/card:opacity-100"
          [zTooltip]="'PAC.XProject.RemoveKnowledgebase' | translate: { Default: 'Remove knowledgebase' }"
          zPosition="right"
          (click)="removeKB(toolset)"
        >
          <i class="ri-delete-bin-7-line"></i>
        </button>
      </knowledgebase-card>
    }
  </div>

  <div class="flex items-center py-4 px-1 text-lg font-semibold text-text-tertiary uppercase">
    <div class="mr-3">
      {{ 'PAC.XProject.AvailableKnowledgebases' | translate: { Default: 'Available Knowledgebases' } }}
    </div>
    <div class="grow w-0 h-px bg-divider-regular"></div>
  </div>

  @if (wsKbLoading()) {
    <list-content-loader />
  } @else {
    <div
      class="relative content-start gap-4 pt-2 pb-4 px-1 grow shrink-0 opacity-60 hover:opacity-100 transition-all duration-300 ease-in-out"
      ngmDynamicGrid
      colWidth="280"
      box="content-box"
    >
      @for (item of wsKnowledgebases(); track item.knowledgebase.id) {
        <knowledgebase-card
          class="group/card col-span-1 min-h-[140px] cursor-pointer bg-components-card-bg"
          [knowledgebase]="item.knowledgebase"
        >
          @if (item.added) {
            <button
              action
              type="button"
              class="btn rounded-xl justify-center w-8 h-8 text-text-success"
              [zTooltip]="'PAC.XProject.AddedKnowledgebase' | translate: { Default: 'Added knowledgebases' }"
              zPosition="right"
            >
              <i class="ri-checkbox-circle-line"></i>
            </button>
          } @else {
            <button
              action
              type="button"
              class="btn rounded-xl justify-center w-8 h-8 opacity-0 group-hover/card:opacity-100"
              [zTooltip]="'PAC.XProject.AddKnowledgebase' | translate: { Default: 'Add knowledgebase' }"
              zPosition="right"
              (click)="$event.stopPropagation(); addKnowledgebase(item.knowledgebase)"
            >
              <i class="ri-apps-2-add-line"></i>
            </button>
          }
        </knowledgebase-card>
      }
    </div>
  }
}