@if (editable()) {
  <div
    class="flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] shadow-xs shadow-shadow-shadow-3 border border-divider-regular bg-components-input-bg-normal hover:bg-hover-bghover:border-components-input-border-active mt-3.5 shrink-0"
  ></div>
}
<div class="min-w-0 grow">
  <div class="group/card w-full rounded-xl px-3 pb-2 pt-2.5 hover:bg-hover-bg">
    <div class="relative flex h-5 items-center justify-between">
      <div class="flex items-center gap-x-2">
        <div class="flex items-center">
          <i class="ri-text-block mr-1 text-text-tertiary"></i>
          <div class="system-xs-medium">
            {{ 'PAC.Knowledgebase.Chunk' | translate: { Default: 'Chunk' } }}-{{ displayIndex() }}
          </div>
        </div>
        <div class="system-xs-medium text-text-quaternary">·</div>
        <div class="text-text-tertiary system-xs-medium">
          {{ chunk().pageContent?.length }} {{ 'PAC.Knowledgebase.Characters' | translate: { Default: 'Characters' } }}
        </div>
        @if (chunk().metadata.tokens; as tokens) {
          <div class="system-xs-medium text-text-tertiary">·</div>
          <div class="text-text-tertiary system-xs-medium">
            {{ tokens }} {{ 'PAC.Knowledgebase.Tokens' | translate: { Default: 'Tokens' } }}
          </div>
        }
        <div class="system-xs-medium text-text-quaternary">·</div>
        <!-- <div class="system-xs-medium text-text-tertiary">0 召回次数</div> -->
        <i
          class="ri-eye-fill cursor-pointer text-text-tertiary hover:text-text-primary"
          [class.!text-primary-500]="_preview()"
          (click)="togglePreview()"
        ></i>
      </div>
      <div class="flex items-center gap-1">
        @if (chunk().metadata.relevanceScore; as relevanceScore) {
          <div
            class="relative shrink-0 items-center overflow-hidden border border-divider-regular px-[5px] h-[20px] rounded-md"
          >
            <div
              class="absolute left-0 top-0 h-full border-r-[1.5px] border-text-accent bg-orange-100"
              [ngStyle]="{ width: relevanceScore * 100 + '%' }"
            ></div>
            <div class="relative flex h-full items-center space-x-0.5">
              <div class="text-xs font-medium uppercase">
                {{ 'PAC.Knowledgebase.RelevanceScore' | translate: { Default: 'Relevance Score' } }}
              </div>
              <div class="text-xs font-semibold">{{ relevanceScore | number: '0.0-2' }}</div>
            </div>
          </div>
        }
        @if (chunk().metadata.score; as score) {
          <div
            class="relative shrink-0 items-center overflow-hidden border border-divider-regular px-[5px] h-[20px] rounded-md"
          >
            <div
              class="absolute left-0 top-0 h-full border-r-[1.5px] border-primary-500 bg-primary-200/50"
              [ngStyle]="{ width: score * 100 + '%' }"
            ></div>
            <div class="relative flex h-full items-center space-x-0.5">
              <div class="text-xs font-medium uppercase">score</div>
              <div class="text-xs font-semibold">{{ score | number: '0.0-2' }}</div>
            </div>
          </div>
        } @else {
          <div class="flex items-center flex-row-reverse gap-1">
            @if (enabled()) {
              <span class="w-2 h-2 mr-1 rounded-[2.5px] shadow-md bg-emerald-500 flex"></span>
              <span class="text-sm text-text-tertiary system-xs-regular">
                {{ 'PAC.Knowledgebase.Enabled' | translate: { Default: 'Enabled' } }}
              </span>
            } @else {
              <span class="w-2 h-2 mr-1 rounded-[2.5px] shadow-md bg-components-card-bg flex"></span>
              <span class="text-sm text-text-tertiary system-xs-regular">
                {{ 'PAC.Knowledgebase.Disabled' | translate: { Default: 'Disabled' } }}
              </span>
            }
          </div>
        }
      </div>
    </div>
    <div class="font-body !mt-0.5 text-text-primary">
      @if (_preview()) {
        <markdown
          class="ngm-copilot-markdown"
          [disableSanitizer]="true"
          lineNumbers
          [start]="5"
          [data]="chunk().pageContent"
        />
      } @else {
        <p class="line-clamp-2">{{ chunk().pageContent }}</p>
      }
    </div>

    @if (children(); as children) {
      @if (children.length > 0) {
        <div class="flex flex-col pb-2 pt-1">
          <div class="flex items-center justify-between">
            <div class="flex h-7 items-center rounded-lg pl-1 pr-3 cursor-pointer" (click)="expanded.set(!expanded())">
              <i class="ri-arrow-right-s-line mr-0.5 text-text-secondary" [class.rotate-90]="expanded()"></i>
              <span class="system-sm-semibold-uppercase text-text-secondary"
                >{{ children.length }} {{ 'PAC.Knowledgebase.ChildChunks' | translate: { Default: 'Children' } }}</span
              >
              @if (editable()) {
                <span class="pl-1.5 text-xs font-medium text-text-quaternary hidden group-hover/card:inline-block"
                  >·</span
                >
                <button
                  type="button"
                  class="btn btn-secondary btn-sm system-xs-semibold-uppercase px-1.5 py-0.5 hidden group-hover/card:inline-block"
                >
                  {{ 'PAC.ACTIONS.Add' | translate: { Default: 'Add' } }}
                </button>
              }
            </div>
          </div>
          @if (expanded()) {
            <div class="flex gap-x-0.5 items-center">
              <div class="self-stretch">
                <div class="h-full mx-[7px] w-[2px] bg-text-accent-secondary"></div>
              </div>
              <p class="flex w-full flex-col leading-6 gap-y-2">
                @for (chunk of children; track chunk; let j = $index) {
                  <span class="group relative break-all">
                    <div class="inline-flex items-center">
                      <span
                        class="bg-hover-bg-alt px-1 uppercase text-text-tertiary border border-divider-regular group-hover:bg-accent-500 group-hover:text-text-primary"
                      >
                        <span class="text-nowrap text-[10px] font-semibold align-bottom">C-{{ j + 1 }}</span>
                      </span>
                      @if (chunk.metadata.score; as score) {
                        <div
                          class="inline-block relative items-center overflow-hidden border border-divider-regular px-[5px] border-l-0"
                        >
                          <div
                            class="absolute left-0 top-0 h-full border-r-[1.5px] border-primary-500 bg-primary-200/50"
                            [ngStyle]="{ width: score * 100 + '%' }"
                          ></div>
                          <div
                            class="relative flex h-full items-center space-x-0.5 text-util-colors-blue-brand-blue-brand-700"
                          >
                            +
                            <div class="system-2xs-medium-uppercase">score</div>
                            <div class="system-xs-semibold">{{ score | number: '0.0-2' }}</div>
                          </div>
                        </div>
                      }
                    </div>
                    <span
                      class="py-[3px] whitespace-pre-line break-all bg-hover-bg px-1 font-body group-hover:bg-state-accent-hover-alt group-hover:text-text-primary leading-6 text-text-secondary"
                      >{{ chunk.pageContent }}</span
                    >

                    @if (editable()) {
                      <div class="absolute right-2 -top-1 hidden group-hover:inline-block">
                        <button
                          type="button"
                          class="w-6 h-6 flex justify-center items-center rounded-lg hover:bg-red-50 hover:text-text-destructive"
                        >
                          <i class="ri-delete-bin-4-line"></i>
                        </button>
                      </div>
                    }
                  </span>
                }
              </p>
            </div>
          }
        </div>
      }
    }

    @if (showMetadata()) {
      <div class="w-full border-t border-solid border-divider-deep px-1 pt-1 mt-1 text-text-secondary">
        @if (document(); as document) {
          <knowledge-doc-id [doc]="document" />
        }
      </div>
    }
  </div>
</div>