<ion-header>
  <ion-toolbar>
    <ion-title>TaskChain</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
  <ion-card color="medium">
    <ion-card-header>
      <ion-card-title>AI小助手</ion-card-title>
      <ion-card-subtitle>填写以下信息，我来给你生成图片。</ion-card-subtitle>
    </ion-card-header>
  </ion-card>
  <ion-button (click)="createTask()">运行</ion-button>

  @for(task of taskList; track task.title){
  <ion-card>
    <ion-card-content>
      @if(task.progress === 0 && !task.error) {
      <!-- <div class="loader"></div> -->
      <ion-icon name="ellipse-outline"></ion-icon>
      }
      @if(task.progress !== 0 && task.progress !== 1){
      <div class="loader"></div>
      }
      @if(task.progress === 1) {
      <ion-icon name="checkmark-circle-outline" class="text-green"></ion-icon>
      }
      @if(task.error) {
      <ion-icon name="close-circle-outline" class="text-red"></ion-icon>
      }

      <span style="margin-left: 10px;">{{task.title}} &nbsp;&nbsp;&nbsp;</span>
      @if(task.progress && task.progress !== 1) {
      <span>{{task.progress * 100 | number: '2.0-0'}}%</span>
      }
      @if(task.error){
      <span class="place-right text-red">{{task.error}}</span>
      }
    </ion-card-content>
  </ion-card>
  }


  <!-- 生成的图片 -->

  @if(shareData.images) {
  <ion-card color="light">
    <ion-card-header>
      <ion-card-title>生成图片</ion-card-title>
      <ion-card-subtitle>根据您填写的信息，我给你生成的图片。</ion-card-subtitle>
    </ion-card-header>
    <ion-list>
      <ion-item>
        <!-- 生成结果 -->
        @for(imageUrl of shareData.images; track imageUrl){
        <img [src]="imageUrl" alt="" srcset="">
        }
      </ion-item>
    </ion-list>
  </ion-card>
  }


</ion-content>