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

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

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

  <!-- 底部操作栏 -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button color="danger" (click)="deleteDiary()">
      <ion-icon name="trash-outline"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>