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

<ion-content>
  <ion-item *ngFor="let item of lostFoundItems">
    <ion-list>
      <p>物品: {{item.item}}</p>
      <p>丢失/拾取: {{item.status}}</p>
      <p>地点: {{item.location}}</p>
      <p>时间: {{item.time}}</p>
      <p>图片:</p>
         <p><img *ngIf="item.image" [src]="item.image" style="max-width: 100px;"></p>
      <p>备注: {{item.remark}}</p>
    </ion-list>
  </ion-item>
  <ion-item *ngFor="let item of lostFoundItems">
    <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 lostFoundItems">
      <ion-item>
        <ion-textarea placeholder="输入回复内容" [(ngModel)]="replyContent"></ion-textarea>
      </ion-item>
      <ion-button (click)="submitReply(item)">提交回复</ion-button>
    </ion-item>
  </ion-list>
</ion-content>