<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="navigateToDiary()">
        <ion-icon name="calendar"></ion-icon>
        <span>日历</span>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="navigateToToday()">
        <ion-icon name="today-outline"></ion-icon>
        <span>今日</span>=
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
    <div class="main-content">
      <div class="card-section">
        <div class="cards" *ngIf="PLContentsList.length > 0">
          <div class="card" *ngFor="let content of PLContentsList" (click)="viewItemDetails(content)">
            <p>{{content.get('type')}}</p>
            <h1 style="text-align: left;">{{ content.get('title') }}</h1>
            <h4 style="text-align: left;">{{ content.get('editor') }}</h4>
            <h4 style="text-align: left;">{{ content.get('snippet') }}</h4>
            <img [src]="content.get('image')" alt="content.get('title')" class="card-image" >
            <p style="text-align: left;">{{content.get('time')}}</p>
          </div>
        </div>
      </div>
    </div>
</ion-content>

