<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="cancel()">取消</ion-button>
    </ion-buttons>
    <ion-title>{{mode === 'edit' ? '编辑日记' : '新建日记'}}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="save()" [strong]="true">保存</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div class="edit-container">
    <div class="info-row">
      <div class="date-info">
        <div class="date">{{diary.date}}</div>
        <div class="weekday">{{diary.weekday}}</div>
        <div class="time">{{diary.time}}</div>
      </div>
      
      <div class="selectors">
        <ion-item>
          <ion-select label="天气" [(ngModel)]="diary.weather" interface="action-sheet">
            <ion-select-option value="晴">晴</ion-select-option>
            <ion-select-option value="多云">多云</ion-select-option>
            <ion-select-option value="阴">阴</ion-select-option>
            <ion-select-option value="雨">雨</ion-select-option>
            <ion-select-option value="雪">雪</ion-select-option>
          </ion-select>
        </ion-item>
        
        <ion-item>
          <ion-select label="心情" [(ngModel)]="diary.mood" interface="action-sheet">
            <ion-select-option value="😊">😊 开心</ion-select-option>
            <ion-select-option value="😢">😢 难过</ion-select-option>
            <ion-select-option value="😠">😠 生气</ion-select-option>
            <ion-select-option value="😌">😌 平静</ion-select-option>
            <ion-select-option value="🤔">🤔 思考</ion-select-option>
          </ion-select>
        </ion-item>
      </div>
    </div>
    
    <ion-textarea
      [(ngModel)]="diary.content"
      placeholder="写下你的日记..."
      autoGrow="true"
      class="diary-content"
    ></ion-textarea>
  </div>
</ion-content>