@if (!toolsets()?.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-hammer-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.NoToolsYet' | translate: { Default: 'No tools yet' } }}
      </h3>
      <span class="text-text-secondary max-w-md">
        {{
          'PAC.XProject.AddToolsForProject'
            | translate: { Default: 'Select to bind a workspace to add tools to the project general agent' }
        }}
      </span>
    </div>
  </div>
}

<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 toolsets(); track toolset.id) {
    <xpert-toolset-card [toolset]="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.RemoveTool' | translate: { Default: 'Remove tool' }"
        zPosition="right"
        (click)="removeTool(toolset)"
      >
        <i class="ri-delete-bin-7-line"></i>
      </button>
    </xpert-toolset-card>
  }
</div>

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

  @if (wsToolLoading()) {
    <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"
    >
      <ngm-card-create
        [title]="'PAC.Xpert.CreateMCPTool' | translate: { Default: 'Create MCP Toolset' }"
        [helpTitle]="'PAC.Xpert.LearnCreateMCPTool' | translate: { Default: 'Learn more about Xpert MCP toolset' }"
        helpUrl="/docs/ai/tool/mcp/"
        (create)="configureMCP()"
      >
        <div class="flex flex-col px-2">
          <button
            class="mb-1 flex w-full cursor-pointer items-center rounded-lg px-6 py-[7px] text-[13px] font-medium leading-[18px] text-text-tertiary hover:bg-hover-bg hover:text-text-secondary"
            [cdkMenuTriggerFor]="builtinMenu"
            (click)="$event.stopPropagation()"
          >
            <i class="ri-tools-line text-lg mr-2"></i>
            <span>{{ 'PAC.Xpert.OrCreateBuiltinToolset' | translate: { Default: 'Or create built-in toolset' } }}</span>
          </button>
        </div>
      </ngm-card-create>
      @for (item of wsToolsets(); track item.toolset.id) {
        <xpert-toolset-card
          class="group/card col-span-1 min-h-[140px] cursor-pointer bg-components-card-bg"
          [toolset]="item.toolset"
          (click)="openToolset(item.toolset)"
        >
          @if (item.added) {
            <button
              action
              type="button"
              class="btn rounded-xl justify-center w-8 h-8 text-text-success"
              [zTooltip]="'PAC.XProject.AddedTool' | translate: { Default: 'Added tool' }"
              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.AddTool' | translate: { Default: 'Add tool' }"
              zPosition="right"
              (click)="$event.stopPropagation(); addTool(item.toolset)"
            >
              <i class="ri-apps-2-add-line"></i>
            </button>
          }
        </xpert-toolset-card>
      }
    </div>
  }

  <mcp-marketplace
    class="opacity-60 hover:opacity-100 transition-all duration-300 ease-in-out"
    [workspace]="workspace()"
    (refresh)="refreshWorkspace()"
  />
}

<ng-template #builtinMenu>
  <div cdkMenu class="relative">
    <div class="w-[200px] p-2 sticky top-0 z-10 bg-components-card-bg">
      <i class="ri-search-line absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 flex justify-center items-center"></i>
      <input
        class="xp-input w-full pl-[26px]"
        placeholder="{{ 'PAC.KEY_WORDS.Search' | translate: { Default: 'Search' } }}"
        [(ngModel)]="search"
      />
    </div>
    <div class="p-2">
      @for (toolset of builtinToolProviders(); track toolset.id) {
        <div
          cdkMenuItem
          class="shrink-0 w-full flex justify-start items-center px-1.5 py-2 rounded-lg overflow-hidden"
          [cdkMenuItemDisabled]="toolset.not_implemented"
          (click)="createBuiltinToolset(toolset)"
        >
          <emoji-avatar [avatar]="toolset.avatar" xs class="shrink-0 mr-2 overflow-hidden rounded-lg scale-95" />
          <div class="flex-1 truncate" [ngmHighlight]="searchText()" [content]="toolset.label | i18n">
            {{ toolset.label | i18n }}
          </div>
        </div>
      }
    </div>
  </div>
</ng-template>