<ion-header [translucent]="true">

    <div class="header">
        <ion-buttons slot="start">
        <ion-button id="menuBtn">
            <ion-icon slot="icon-only" name="menu-outline"></ion-icon>
        </ion-button>
        </ion-buttons>
        
        <div class="header-title">日记本</div>
        
        <ion-buttons slot="end">
        <ion-fab-button (click)="goToEditPage('编辑')" size="small">
            <ion-icon name="add"></ion-icon>
        </ion-fab-button>
         <ion-button (click)="logout('登出')">
            <ion-icon slot="icon-only" name="log-out-outline"></ion-icon>
        </ion-button>
        </ion-buttons>
    </div>

</ion-header>

<ion-content [fullscreen]="true">
    
    <!-- 内容区域 -->
    <div class="content" id="diaryList">
         @for(diary of diaries;track diary.id){
        <!-- 日记卡片1 -->
        <div class="diary-card" (click)="goMessage(diary)">
            <div class="diary-time">
                <div class="diary-date">{{diary.date}}</div>
                <div class="diary-week">{{diary.weekday}}</div>
                <div class="diary-hour">{{diary.time}}</div>
            </div>
            <div class="diary-content">
                {{diary.content}}
            </div>
            <!-- @if(diary.weather || diary.mood) {
            <div class="diary-meta">
                @if(diary.weather) {
                <span class="weather">{{diary.weather}}</span>
                }
                @if(diary.mood) {
                <span class="mood">{{diary.mood}}</span>
                }
            </div>
            } -->
        </div>
        } @empty {
        <div class="empty-state">
            <ion-icon name="journal-outline"></ion-icon>
            <p>还没有日记，点击右上角+创建第一篇日记</p>
        </div>
        }
    </div>
    
</ion-content>
