<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab2"></ion-back-button>
    </ion-buttons>
    <ion-title>动态详情</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="dynamic-container" *ngIf="dynamic">
    <!-- 用户信息 -->
    <div class="user-info">
      <div class="user-avatar">{{ dynamic.get('author')?.username?.charAt(0) || 'U' }}</div>
      <div class="user-details">
        <div class="user-name">{{ dynamic.get('author')?.username || '匿名用户' }}</div>
        <div class="post-time">{{ dynamic.createdAt | date:'yyyy-MM-dd HH:mm' }}</div>
      </div>
    </div>

    <!-- 动态内容 -->
    <div class="dynamic-content">
      {{ dynamic.get('content') }}
    </div>

    <!-- 动态图片 -->
    <div class="dynamic-images" *ngIf="dynamic.get('images')?.length > 0">
      <img *ngFor="let image of dynamic.get('images')" [src]="image" alt="动态图片">
    </div>

    <!-- 互动栏 -->
    <div class="action-bar">
      <ion-button fill="clear" (click)="toggleLike()">
        <ion-icon 
          [name]="isLiked ? 'heart' : 'heart-outline'" 
          [color]="isLiked ? 'danger' : ''">
        </ion-icon>
        {{ dynamic.get('likeCount') || 0 }}
      </ion-button>
      
      <ion-button fill="clear" (click)="addComment()">
        <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
        {{ dynamic.get('commentCount') || 0 }}
      </ion-button>
      
      <ion-button fill="clear" (click)="shareDynamic()">
        <ion-icon name="share-social-outline"></ion-icon>
        {{ dynamic.get('shareCount') || 0 }}
      </ion-button>
    </div>

    <!-- 评论列表 -->
    <div class="comments-section">
      <h3>评论 ({{ comments.length }})</h3>
      
      <div class="comment-item" *ngFor="let comment of comments">
        <div class="comment-user">
          <div class="user-avatar">{{ comment.get('user')?.username?.charAt(0) || 'U' }}</div>
          <div class="user-name">{{ comment.get('user')?.username || '匿名用户' }}</div>
          <div class="comment-time">{{ comment.createdAt | date:'yyyy-MM-dd HH:mm' }}</div>
        </div>
        <div class="comment-content">{{ comment.get('content') }}</div>
      </div>
    </div>
  </div>
</ion-content>