<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-button (click)="dismiss()">
        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{course?.title}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div class="course-hero">
    <img [src]="'assets/courses/' + course?.id + '-large.jpg'" [alt]="course?.title">
  </div>

  <ion-list>
    <ion-list-header>
      <ion-label>训练步骤</ion-label>
    </ion-list-header>
    <ion-item *ngFor="let step of steps">
      <ion-label>
        <h3>{{step.name}}</h3>
        <p>{{step.description}}</p>
        <p>{{step.duration}}秒</p>
      </ion-label>
    </ion-item>
  </ion-list>

  <ion-button expand="block" (click)="startTraining()">
    开始训练
  </ion-button>
</ion-content>