<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      <ion-grid>
        <ion-row>
          <ion-col size="2">
            <ion-avatar>
              <ion-img *ngIf="activityItems.length > 0" [src]="activityItems[0].headImage" class="avatar"></ion-img>
              <ion-icon *ngIf="activityItems.length === 0" name="person-circle-outline" class="default-avatar"></ion-icon>
            </ion-avatar>
          </ion-col>
          <ion-col size="5">
            <ion-label>
              <ion-note>{{activityItems.length > 0 ? activityItems[0].publisher : 'tab11'}}</ion-note>
              <p>发布时间: {{activityItems.length > 0 ? activityItems[0].timestamp : 'N/A'}}</p>
            </ion-label>
          </ion-col>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <h2>{{activityItems.length > 0 ? activityItems[0].title : 'tab14'}}</h2>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item *ngFor="let item of activityItems">
    <ion-list>
      <p>活动名称: {{item.name}}</p>
      <p>可参与对象: {{item.target}}</p>
      <p>开始时间: {{item.startTime}}</p>
      <p>持续时长: {{item.duration}}</p>
      <p>地点: {{item.location}}</p>
      <p>备注: {{item.remark}}</p>
    </ion-list>
  </ion-item>
  <ion-item *ngFor="let item of activityItems">
    <ion-list>
      <!-- 显示回复内容 -->
      <p>对话内容:</p>
      <div *ngIf="item.replies && item.replies.length > 0">
        <ul>
          <li *ngFor="let reply of item.replies">
            <p>{{reply.floor}} 楼 {{reply.sender}}: {{reply.content}}</p>
          </li>
        </ul>
      </div>
    </ion-list>
  </ion-item>
  <ion-list>
    <!-- 回复框 -->
    <ion-item *ngFor="let item of activityItems">
      <ion-item>
        <ion-textarea placeholder="输入回复内容" [(ngModel)]="replyContent"></ion-textarea>
      </ion-item>
      <ion-button class="sender" (click)="submitReply(item)">提交回复</ion-button>
    </ion-item>
  </ion-list>
</ion-content>