<ion-header [translucent]="true">
  <div class="header">
    <ion-item class="search-bar">
      <ion-icon name="search-outline"></ion-icon>
      <ion-input class="Input with placeholder" placeholder="负面情绪禁止过夜——现在立刻销毁"></ion-input>
    </ion-item>
  </div>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 功能板块 -->
  <div class="function-grid">
    <div (click)="importData()" class="function-card card-1">树洞</div>
    <div (click)="goThankslist('清单')" class="function-card card-2">感恩清单</div>
    <div class="function-card card-3">漂流瓶</div>
    <div class="function-card card-4">情绪发泄室</div>
  </div>
  
  <!-- 动态日记标题栏 -->
  <div class="tab-bar">
    <div class="tab-item active">推荐</div>
    <div class="tab-item">关注</div>
    <div class="tab-item">话题</div>
  </div>
  
  <!-- 动态日记列表 -->
  <div class="diary-list">
    <!-- 动态项 -->
    <div (click)="goToDynamic(dynamic.id)" class="diary-item" *ngFor="let dynamic of dynamics">
      <div class="user-info">
        <div class="user-left">
          <div class="user-avatar">{{ dynamic.get('author')?.username?.charAt(0) || 'U' }}</div>
          <div class="user-name">{{ dynamic.get('author')?.username || '匿名用户' }}</div>
        </div>
        <ion-icon name="ellipsis-horizontal" class="more-icon"></ion-icon>
      </div>
      <div class="diary-content">
        {{ dynamic.get('content') }}
      </div>
      <div class="diary-image" *ngIf="dynamic.get('images')?.length > 0">
        <img [src]="dynamic.get('images')[0]" alt="动态图片">
      </div>
      <div class="action-bar">
        <div class="action-item" (click)="toggleLike(dynamic)">
          <ion-icon 
            [name]="userInteractions[dynamic.id]?.liked ? 'heart' : 'heart-outline'" 
            [color]="userInteractions[dynamic.id]?.liked ? 'danger' : ''" 
            class="action-icon">
          </ion-icon>
          <span class="action-count">{{ dynamic.get('likeCount') || 0 }}</span>
        </div> 
        <div class="action-item" (click)="addComment(dynamic)">
          <ion-icon name="chatbubble-ellipses-outline" class="action-icon"></ion-icon>
          <span class="action-count">{{ dynamic.get('commentCount') || 0 }}</span>
        </div>
        <div class="action-item" (click)="shareDynamic(dynamic)">
          <ion-icon name="share-social-outline" class="action-icon"></ion-icon>
          <span class="action-text">{{ dynamic.get('shareCount') || 0 }}</span>
        </div>
      </div>
    </div>
  </div>
</ion-content>