<ion-header>
  <ion-toolbar>
    <ion-title>Pet Market</ion-title>
    <ion-buttons slot="end">
      <ion-button routerLink="/study/pet/edit/new" >发布</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar [(ngModel)]="searchQuery" (ionInput)="fetchPets()"></ion-searchbar>
  <ion-segment [(ngModel)]="selectedType" (ionChange)="fetchPets()">
    <ion-segment-button *ngFor="let type of petTypes" [value]="type">
      {{ type }}
    </ion-segment-button>
  </ion-segment>
  <ion-button (click)="toggleSort()">Sort by Price</ion-button>
  <ion-list>
    <ion-card *ngFor="let pet of pets">
      <ion-card-header>
        <ion-card-title>{{ pet.get('name') }}</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        Type: {{ pet.get('type') }}<br>
        Price: {{ pet.get('price') | currency }}
      </ion-card-content>
      <ion-button fill="clear" routerLink="/study/pet/{{pet.id}}">详情</ion-button>
      <ion-button *ngIf="pet?.get('user')?.id == user?.id" fill="clear" routerLink="/study/pet/edit/{{pet.id}}">编辑</ion-button>
    </ion-card>
  </ion-list>
</ion-content>