<ion-header class="warm-detail-header">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1" class="warm-back-button"></ion-back-button>
    </ion-buttons>
    <ion-title class="warm-detail-title">日记详情</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="editDiary()" class="warm-edit-button">
        <ion-icon slot="icon-only" name="create-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="warm-detail-content">
  <!-- 日记头部信息 -->
  <div class="warm-diary-header">
    <div class="warm-date-section">
      <h1 class="warm-date">{{ diary?.get('date') }}</h1>
      <div class="warm-week-time">
        <ion-chip class="warm-meta-chip">
          <ion-icon name="calendar-outline" class="warm-meta-icon"></ion-icon>
          <ion-label>{{ diary?.get('weekday') }}</ion-label>
        </ion-chip>
        <ion-chip class="warm-meta-chip">
          <ion-icon name="time-outline" class="warm-meta-icon"></ion-icon>
          <ion-label>{{ diary?.get('time') }}</ion-label>
        </ion-chip>
      </div>
    </div>
    
    <div class="warm-meta-section">
      <ion-chip *ngIf="diary?.get('weather')" class="warm-info-chip weather">
        <ion-icon name="partly-sunny-outline"></ion-icon>
        <ion-label>{{ diary?.get('weather') }}</ion-label>
      </ion-chip>
      <ion-chip *ngIf="diary?.get('mood')" class="warm-info-chip mood">
        <ion-icon name="happy-outline"></ion-icon>
        <ion-label>{{ diary?.get('mood') }}</ion-label>
      </ion-chip>
    </div>
  </div>

  <!-- 日记内容 -->
  <div class="warm-content-card">
    <div class="warm-content-text">
      {{ diary?.get('content') }}
    </div>
  </div>

  <!-- 底部操作栏 -->
  <div class="warm-action-bar">
    <!-- <ion-button fill="clear" color="medium" (click)="editDiary()" class="warm-action-button">
      <ion-icon slot="start" name="create-outline"></ion-icon>
      编辑
    </ion-button> -->
    <ion-button slot="end" fill="clear" color="danger" (click)="deleteDiary()" class="warm-action-button">
      <ion-icon name="trash-outline"></ion-icon>
      删除
    </ion-button>
  </div>
</ion-content>