<!-- record.page.html -->
<ion-header [translucent]="true">
  <header class="header">百战鉴</header>
</ion-header>

<ion-content [fullscreen]="true">
  <main class="main-content">
    <!-- 记录标题栏 -->
    <div class="record-header">
      <div class="record-title">运动记录</div>
      <ion-button fill="clear" class="add-btn">
        <ion-icon slot="icon-only" name="add" aria-label="添加记录"></ion-icon>
      </ion-button>
    </div>

    <!-- 记录列表 -->
    <div class="record-list">
      @for(record of records;track record){
        
      <div (click)="goRecord(record)" class="record-card" >
        <div class="record-icon" [ngClass]="'icon-' + record.type"></div>
        <div class="record-details">
          <div class="record-date">{{record.date}} {{record.time}}</div>
          <div class="record-info">
            <span class="record-duration">{{record.duration}}分钟</span>
            <span class="record-intensity">强度: {{record.intensity}}</span>
            <span class="record-fatigue">疲劳度: {{record.fatigue}}/10</span>
          </div>
          <div class="record-location">{{record.location}}</div>
        </div>
        <ion-button fill="clear" class="more-btn">
          <ion-icon slot="icon-only" name="ellipsis-vertical" aria-label="更多"></ion-icon>
        </ion-button>
      </div>
      }
    </div>

    <!-- 空状态 -->
    <div class="empty-state" *ngIf="records.length === 0">
      <div class="empty-icon">⚔️</div>
      <div class="empty-text">暂无训练记录</div>
      <ion-button fill="outline" class="empty-btn" (click)="addRecord()">添加首条记录</ion-button>
    </div>
  </main>
</ion-content>