<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-item lines="none">
      <ion-avatar slot="start" class="image-container">
        <img src="/assets/img/1.png" alt="Your Image" class="header-image">
      </ion-avatar>
      <ion-searchbar slot="end" expand="with-icon"></ion-searchbar>
      <ion-buttons slot="end">
        <ion-button fill="clear" (click)="openPublishModal()">
            发布+ 
        </ion-button>
      </ion-buttons>
    </ion-item>
  </ion-toolbar>
</ion-header>


 <ion-content [fullscreen]="true">
<!-- 包含热门话题区和讨论区的父容器 -->
<ion-segment [scrollable]="true" value="heart">
    <div class="content-container">
    <!-- 热门话题区 -->
    <section class="card-section">
     <ion-card class="card1">
      <ion-card-header>
       <ion-card-title >热门话题</ion-card-title>
      </ion-card-header>
      <ion-card-content class="scrollable-content">
       <ion-list>
        <ion-item *ngFor="let label of (labelCount|keyvalue)">
         <ion-label>
          <h2>{{ label.key }}</h2>
          <p>参与人数 👤| 热度:{{ label.value }}</p>
         </ion-label>
        </ion-item>
       </ion-list>
      </ion-card-content>
     </ion-card>
    </section>
  
    <!-- 话题讨论区 -->
    <section class="card-section">
     <ion-card class="card2">
      <ion-card-header>
       <ion-card-title >讨论区</ion-card-title>
      </ion-card-header>
      <ion-card-content class="scrollable-content">
       <ion-list>
        <ion-item *ngFor="let post of filmpostList">
         <ion-label>
          <h2>{{post?.get('title')}} </h2>
          <p>作者:{{post?.get('author')?.username}} |评论:</p>
         </ion-label>
        </ion-item>
       </ion-list>
      </ion-card-content>
     </ion-card>
    </section>
   </div>
  </ion-segment>
 


  <ion-list>
    <input type="hidden" [(ngModel)]="selectedPostId">
    <ion-item *ngFor="let post of filmpostList" class="post-item">
      <div>
      <div class="avatar-container">
        <ion-avatar class="avatar">
          <img [src]="post?.get('author')?.avatar||avatarUrl" alt="User Avatar" />
        </ion-avatar>
          <div class="user-info">
            <ion-label class="username">  {{post?.get('author')?.username}} </ion-label>
            </div>
      </div>

    <div class="content">
      <ion-label>
          <h1 class="title">{{post?.get('title')}} </h1>
          <h3 class="topic"></h3>
        <div class="post-content-wrapper">
            <p class="post-content" [class.collapsed]="post?.get('content').length > 200" (click)="toggleContent(post)">
            {{ showFullContent(post) }}
          </p>
            <p *ngIf="post?.get('content').length > 200" class="view-more" (click)="toggleContent(post)">
            {{ isContentCollapsed(post) ? '查看更多' : '收起' }}
          </p>
        </div>
        <div *ngIf="post?.get('avatar')!='undefined'">
            <img  class="post-avatar"  src="{{post?.get('avatar')}}" />
          </div>
        <div class="post-actions">
            <ion-button fill="clear" (click)="likePost()">👍 </ion-button>
          <ion-button fill="clear" (click)="commentPost(post?.id!)">💬</ion-button>
        </div>
      </ion-label>
    </div>  

</div>
    </ion-item>
  </ion-list>
  </ion-content>

