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

<ion-content>
  <ion-card *ngIf="post">
    <ion-card-header>
      <ion-item>
        <ion-avatar slot="start">
          <img [src]="post.avatarUrl" *ngIf="post.avatarUrl" alt="用户头像" />
        </ion-avatar>
        <ion-card-title>{{ post.username }}</ion-card-title>
        <ion-card-subtitle>{{ post.date | date:'short' }}</ion-card-subtitle>
      </ion-item>
    </ion-card-header>
    <ion-card-content>
      <img [src]="post.imageUrl" *ngIf="post.imageUrl" alt="动态图片" class="post-image" />
      <p>{{ post.text }}</p>
      <ion-button (click)="likePost()" [color]="liked ? 'danger' : 'light'">
        <ion-icon name="heart" slot="icon-only"></ion-icon>
        {{ liked ? '已点赞' : '点赞' }}
      </ion-button>
    </ion-card-content>
    <ion-item>
      <ion-input [(ngModel)]="newComment" placeholder="写下你的评论..."></ion-input>
      <ion-button (click)="addComment()" color="primary">
        <ion-icon slot="icon-only" name="send"></ion-icon>
      </ion-button>
    </ion-item>
    <ion-list>
      <ion-item *ngFor="let comment of comments">
        <ion-label>{{ comment.username }}: {{ comment.text }}</ion-label>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>

