<!-- record-detail.page.html -->
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab2" text="返回" color="gold"></ion-back-button>
    </ion-buttons>
    <ion-title class="header-title">训练详情</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <main class="main-content">
    <!-- 顶部卡片 -->
    <div class="detail-card">
      <div class="record-header">
        <div class="record-icon" [ngClass]="'icon-' + record.type"></div>
        <div class="header-text">
          <h2 class="record-title">{{record.location}}</h2>
          <div class="record-meta">
            <span>{{record.date}}</span>
            <span>{{record.time}}</span>
          </div>
        </div>
      </div>

      <!-- 主要信息 -->
      <div class="record-stats">
        <div class="stat-item">
          <div class="stat-value">{{record.duration}}分钟</div>
          <div class="stat-label">训练时长</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{record.intensity}}</div> <!-- 修复未关闭的标签 -->
          <div class="stat-label">训练强度</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{record.fatigue}}/10</div>
          <div class="stat-label">疲劳程度</div>
        </div>
      </div>
    </div>

    <!-- 详细信息 -->
    <div class="detail-section">
      <h3 class="section-title">训练详情</h3>
      <div class="detail-grid">
        <div class="detail-item">
          <ion-icon name="speedometer-outline" class="detail-icon"></ion-icon>
          <div> <!-- 修复未关闭的标签 -->
            <div class="detail-label">速度</div>
            <div class="detail-value">8公里/小时</div>
          </div>
        </div>
        <div class="detail-item">
          <ion-icon name="flame-outline" class="detail-icon"></ion-icon>
          <div>
            <div class="detail-label">卡路里</div>
            <div class="detail-value">420千卡</div>
          </div>
        </div>
        <div class="detail-item">
          <ion-icon name="pulse-outline" class="detail-icon"></ion-icon>
          <div>
            <div class="detail-label">平均心率</div>
            <div class="detail-value">128次/分</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 训练笔记 -->
    <div class="notes-section">
      <h3 class="section-title">训练笔记</h3>
      <div class="notes-content">
        今日晨跑状态良好，城墙上视野开阔，空气清新。途中遇到几位同样晨练的同袍，互相鼓励。
        下次可尝试增加距离至8公里。
      </div>
      <div class="notes-footer">
        <ion-icon name="create-outline" class="edit-icon"></ion-icon>
        <span>编辑笔记</span>
      </div>
    </div>
  </main>
</ion-content>