<ion-header [translucent]="true">
  <ion-toolbar>
    <!-- <ion-title>首页</ion-title> -->
    <ion-searchbar [(ngModel)]="searchTitle" (ionChange)="searchItems()"></ion-searchbar>
    <ion-buttons slot="end">
      <ion-button routerLink="../tab2" >发布</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-segment [(ngModel)]="selectedCategory" (ionChange)="filterItemsByCategory(selectedCategory)">
    <ion-segment-button value="求助" (ionSelect)="filterItemsByCategory('求助')">求助</ion-segment-button>
    <ion-segment-button value="二手交易" (ionSelect)="filterItemsByCategory('二手交易')">二手交易</ion-segment-button>
    <ion-segment-button value="失物招领" (ionSelect)="filterItemsByCategory('失物招领')">失物招领</ion-segment-button>
    <ion-segment-button value="活动" (ionSelect)="filterItemsByCategory('活动')">活动</ion-segment-button>
  </ion-segment>

  <ion-card *ngFor="let item of itemsList" [routerLink]="getDetailPageLink(item)">
    <ion-card-header *ngIf="item.get('category') === selectedCategory || !selectedCategory">
      <ion-card-title>{{ item.title }}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div class="item-container">
        <ion-avatar class="avatar-container">
          <ion-img [src]="item.get('headImage')" alt="头像"></ion-img>
        </ion-avatar>
        <div class="info-container">
          <p class="publisher">{{item.get("publisher")}}</p>
          <h2 class="title">{{item.get("title")}}</h2>
          <p *ngIf="(selectedCategory === '二手交易' || item.get('category') === '二手交易') && item.get('amount')" class="amount">￥{{item.get("amount")}}</p>
        </div>
      </div>
    </ion-card-content>
  </ion-card>