@for (chunk of docs(); track chunk; let i = $index) {
  <div class="space-y-2">
    <div class="flex items-center text-text-secondary text-sm font-medium">
      <i class="ri-text-block mr-1"></i>
      <p class="flex gap-2 ml-0.5">
        <span>Chunk-{{ i }}</span>
        <span>·</span>
        <span>{{ chunk.pageContent.length }} characters</span>
      </p>
    </div>
    <div class="text-text-primary text-sm font-body break-words whitespace-normal">{{ chunk.pageContent }}</div>
  </div>
} @empty {
  @if (error()) {
    <div class="text-text-warning">
      {{ error() }}
    </div>
  }
}

@if (loading()) {
  <xp-spin class="absolute w-full h-full left-0 top-0" />
}