<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/character"></ion-back-button>
    </ion-buttons>
    <ion-title *ngIf="character; else loading">{{ character.name }} 的详情</ion-title>
    <ng-template #loading>
      <ion-title>加载中...</ion-title>
    </ng-template>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div *ngIf="character; else notFound">
    <h2>角色信息</h2>
    <ion-card>
      <img [src]="character.avatar" [alt]="character.name" />
      <ion-card-header>
        <ion-card-title>{{ character.name }}</ion-card-title>
        <ion-card-subtitle>性别: {{ character.gender }}</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <p><strong>外貌描述:</strong> {{ character.appearance }}</p>
        <p><strong>性格描述:</strong> {{ character.personality }}</p>
      </ion-card-content>
    </ion-card>

    <ion-button expand="full" (click)="startChat()" style="margin-top: 20px; --background: #ff69b4; --color: white;">
      开始聊天
    </ion-button>
    <ion-button expand="full" (click)="restoreChat('chatId')" >
      继续聊天
    </ion-button>
  </div>
  <ng-template #notFound>
    <h2>角色未找到</h2>
    <p>您所请求的角色信息不存在。</p>
  </ng-template>
</ion-content>