<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>训练课程</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 添加AI推荐部分 -->
  <ion-list *ngFor="let category of aiRecommendedCourses">
    <ion-list-header>
      <ion-label>
        <ion-icon [name]="category.icon" color="primary"></ion-icon>
        {{category.name}}
      </ion-label>
    </ion-list-header>
    
    <ion-item *ngFor="let course of category.courses" (click)="openCourseDetail(course)">
      <ion-label>
        <h3>{{course.title}}</h3>
        <p>{{getDifficultyStars(course.difficulty)}} · {{course.duration}}分钟</p>
      </ion-label>
      <ion-badge slot="end" color="success">推荐</ion-badge>
    </ion-item>
  </ion-list>

  <!-- 原有分类列表 -->
  <ion-list *ngFor="let category of categories">
    <ion-list-header>
      <ion-label>
        <ion-icon [name]="category.icon" color="primary"></ion-icon>
        {{category.name}}
      </ion-label>
    </ion-list-header>
    
    <ion-item *ngFor="let course of category.courses" (click)="openCourseDetail(course)">
      <ion-label>
        <h3>{{course.title}}</h3>
        <p>{{getDifficultyStars(course.difficulty)}} · {{course.duration}}分钟</p>
      </ion-label>
      <ion-badge slot="end" color="primary">{{course.progress * 100 | number:'1.0-0'}}%</ion-badge>
    </ion-item>
  </ion-list>
</ion-content>

