<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab1"></ion-back-button>
    </ion-buttons>
    <ion-title>健康社区</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let post of posts; let i = index" (click)="goToPostDetail(post)">
      <ion-thumbnail slot="start">
        <img [src]="post.imageUrl" alt="{{ post.title }}">
      </ion-thumbnail>
      <ion-label>
        <div style="display: flex; align-items: center;">
          <img *ngIf="post.authorAvatar" [src]="post.authorAvatar" alt="Author Avatar" style="width: 32px; height: 32px; border-radius: 50%; margin-right: 8px;" />
          <h2>{{ post.title }}</h2>
        </div>
        <p>{{ post.author }} | {{ post.date | date:'mediumDate' }}</p>
        <p>{{ post.content | slice:0:80 }}...</p>
      </ion-label>

      <!-- 删除按钮 -->
      <ion-buttons *ngIf="isCurrentUser(post.author)" slot="end">
        <ion-button (click)="confirmDeletePost(i)" fill="clear" color="danger">
          <ion-icon name="trash-outline"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-item>
  </ion-list>

  <!-- 浮动操作按钮 -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button (click)="openNewPost()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>