<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title class="ion-text-center">
      症状图 {{imagineWork?.progress || 0}}%
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-card>
    <ion-card-header>
      <ion-card-title>症状描述</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-textarea 
        [value]="userPrompt" 
        (ionInput)="promptInput($event)" 
        placeholder="请填写症状描述" 
        autoGrow="true"
        class="textarea-custom">
      </ion-textarea>
      <ion-button 
        (click)="createImage()" 
        expand="full" 
        class="button-custom">
        生成症状图
      </ion-button>
    </ion-card-content>
  </ion-card>

  <ion-card *ngIf="PictureDescResult">
    <ion-card-header>
      <ion-card-title>症状描述</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div>{{PictureDescResult}}</div>
    </ion-card-content>
  </ion-card>

  <div class="image-container">
    <ng-container *ngIf="images.length; else loadingTemplate">
      <ng-container *ngFor="let imageUrl of images; trackBy: trackImage">
        <img [src]="imageUrl" alt="生成的症状图" class="generated-image">
      </ng-container>
    </ng-container>
    <ng-template #loadingTemplate>
      <h1 *ngIf="imagineWork">生成中...</h1>
      <h1 *ngIf="!imagineWork">未开始</h1>
    </ng-template>
  </div>
</ion-content>