<div class="cv-page">
  <div class="cv-toolbar">
    <button class="btn-back" (click)="back()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
      {{ 'common.back' | translate }}
    </button>
    <span class="spacer"></span>
    @if (characterId) {
      <button class="btn-ai" (click)="toggleChat()" [class.active]="chatOpen">
        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
        {{ 'characterView.aiAssistant' | translate }}
      </button>
    }
    <button class="btn-edit" (click)="edit()">
      <lucide-icon [img]="Edit3" [size]="14"></lucide-icon>
      {{ 'common.edit' | translate }}
    </button>
  </div>

  <app-persona-view [persona]="character" [templateFields]="templateFields"></app-persona-view>
</div>

@if (characterId && campaignId) {
  <app-ai-chat-drawer
    [campaignId]="campaignId"
    entityType="character"
    [entityId]="characterId"
    [isOpen]="chatOpen"
    (close)="chatOpen = false">
  </app-ai-chat-drawer>
}
