<ion-card>
  <ion-card-header>
    <ion-card-title>{{ card.title }}</ion-card-title>
    <ion-card-subtitle>{{ card.author }}</ion-card-subtitle>
  </ion-card-header>
  <ion-card-content>
    发布于：{{ card.date }}
  </ion-card-content>
  <ion-card-content>
    <p style="white-space: pre-wrap;">{{ card.content }}</p>
  </ion-card-content>
  <ion-card-content style="display: flex; justify-content: space-between; align-items: center; padding: 0 10px; gap: 10px;">
    <div style="display: flex; justify-content: flex-start; align-items: center; flex-grow: 1; min-width: 0;">
      Likes: {{ card.likes }}
      <ion-button>
        <ion-icon name="thumbs-up-sharp"></ion-icon>
      </ion-button>
    </div>
    <div style="display: flex; justify-content: center; align-items: center; flex-grow: 1; min-width: 0;">
      Forwards: {{ card.forwards }}
      <ion-button>
        <ion-icon name="share-social-sharp"></ion-icon>
      </ion-button>
    </div>
    <div style="display: flex; justify-content: center; align-items: center; flex-grow: 1; min-width: 0;">
      Comments: {{ card.comments }}
      <ion-button>
        <ion-icon name="chatbubble-ellipses-sharp"></ion-icon>
      </ion-button>
    </div>
    <div style="display: flex; justify-content: flex-end; align-items: center; flex-grow: 1; min-width: 0;">
      <ion-button (click)="triggerScrollToTop()">
        <ion-icon name="chevron-up-circle-sharp"></ion-icon>
      </ion-button>
    </div>
  </ion-card-content>
</ion-card>
