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

    <div class="header">
        <ion-buttons slot="start">
            <ion-menu-button>
                 <ion-icon slot="icon-only" name="menu-outline"></ion-icon>
            </ion-menu-button> 
        </ion-buttons> 
        <div class="header-title">日记本</div> 
        <ion-buttons slot="end">
        <ion-button (click)="goToEditPage('编辑')">
            <ion-icon name="add"></ion-icon>
        </ion-button>
        <!-- <ion-button (click)="importDiary()">
        <ion-icon name="cloud-outline"></ion-icon>
        </ion-button> -->
    </ion-buttons>
    </div>

</ion-header>

<ion-menu side="start" menuId="main-menu" contentId="main-content">
    <ion-header>
        <ion-toolbar>
            <ion-title>菜单</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-item button (click)="navigateTo('settings')">
                <ion-icon name="settings-outline" slot="start"></ion-icon>
                <ion-label>设置</ion-label>
            </ion-item>
            <ion-item button (click)="navigateTo('profile')">
                <ion-icon name="person-outline" slot="start"></ion-icon>
                <ion-label>我的</ion-label>
            </ion-item>
            <ion-item button (click)="navigateTo('activity')">
                <ion-icon name="pulse-outline" slot="start"></ion-icon>
                <ion-label>动态</ion-label>
            </ion-item>
            <ion-item button (click)="navigateTo('drafts')">
                <ion-icon name="archive-outline" slot="start"></ion-icon>
                <ion-label>草稿箱</ion-label>
            </ion-item>
        </ion-list>
    </ion-content>
</ion-menu>

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