<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 (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 topic of filmpostList">
         <ion-label>
          <h2>{{post?.get('title')}}</h2>
          <p>参与人数:10086 👤| 热度:10086🔥 </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>作者: | 评论数: | 热度: </p>
         </ion-label>
        </ion-item>
       </ion-list>
      </ion-card-content>
     </ion-card>
    </section>
   </div>
  </ion-segment>
 


    <ion-list>
      <ion-item *ngFor="let post of filmpostList" class="post-item">
        <ion-avatar slot="start">
          <img src="/assets/img/1.png" alt="User Avatar" />
        </ion-avatar>
        <ion-label>
          <h2>{{post?.get('title')}} </h2>
          <h3 class="topic"></h3>
          <p class="post-content" [class.collapsed]="post?.get('content').length  > 100">
          {{ post?.get('content').length > 100 ? (post?.get('content') | slice:0:100) + '...' : post?.get('content') }}
          </p>
          <p class="post-content" >
            {{post?.get('content')}}
          </p>
          <div class="post-actions">
            <ion-button fill="clear" (click)="likePost()">👍 </ion-button>
            <ion-button fill="clear" (click)="commentPost()">💬</ion-button>
          </div>
        </ion-label>
      </ion-item>
    </ion-list>
  </ion-content>

