<div class="post" *ngFor="let post of posts" >
  <div class="post-header">
    <div class="avatar">
      <ion-img
        [src]="post.get('UserID')?.avatar || 'assets/icon/default-avatar.png'"
        alt="User Avatar" class="avatar-image" />
    </div>
    <div class="user-info">
      <span class="username">{{ post.get('UserID')?.name || "该用户还没有名字" }}</span>
      <ion-icon name="ellipsis-horizontal" class="more-icon"></ion-icon>
    </div>
  </div>
  <!--点击内容区域跳转到详情-->
  <div (click)="goPostDetail(post)">
  <h2 class="post-title">{{ post?.get('title') }}</h2>
  <!--标签-->
  <div class="tag-container">
    <div class="tag" *ngFor="let tag of post.get('tag')">
      <ion-icon name="bookmark-outline" class="tagpicture"></ion-icon>{{ tag }}
    </div>
  </div>

  <p class="post-content-text">{{ post?.get('content') }}</p>
  <div class="image-gallery">
    <img *ngFor="let image of post.get('image')" [src]="image" alt="Post Image" class="post-image">
  </div>
</div>

  <!-- 按钮区域 -->
  <div class="button-container">
    <ion-button fill="clear" class="action-button">
      <ion-icon name="share-social-outline" class=""></ion-icon>
      <span>分享</span>
    </ion-button>
    <ion-button fill="clear" class="action-button" (click)="goPostDetail(post)">
      <ion-icon name="chatbubble-outline"></ion-icon>
      <span>{{ post.commentCount  }}</span>
    </ion-button>
    <ion-button fill="clear" class="action-button" (click)="toggleLike(post)">
      <ion-icon name="heart-outline" [name]="post.postisLiked ? 'heart' : 'heart-outline'" [style.color]="post.postisLiked ? 'red' : 'black'"></ion-icon>
      <span>{{post.data['like']}}</span>
    </ion-button>
  </div>

</div>