<ion-header>
  <ion-toolbar>
    <ion-title>Scenic Spot</ion-title>
    <ion-buttons slot="end">
      <ion-button routerLink="/study/Foodcourt/edit/new" >发布</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-searchbar [(ngModel)]="searchQuery" (ionInput)="fetchFoodcourts()"></ion-searchbar>
  <ion-segment [(ngModel)]="selectedType" (ionChange)="fetchFoodcourts()">
    <ion-segment-button *ngFor="let type of FoodcourtTypes" [value]="type">
      {{ type }}
    </ion-segment-button>
  </ion-segment>
  <ion-button (click)="toggleSort()" style="margin-top: 10px;">Sort by name</ion-button>
  <ion-list>

    <ion-card *ngFor="let Foodcourt of Foodcourts">
      <img [src]="Foodcourt.get('image')" alt="Foodcourt Image">
    <!-- <ion-card-header> -->
      <ion-card-title>{{ Foodcourt.get('name') }}</ion-card-title>
      <ion-card-subtitle>{{ Foodcourt.get('type') }}

        <ion-button *ngIf="Foodcourt?.get('user')?.id == user?.id" class="custom-button" fisll="clear" routerLink="/study/Foodcourt/edit/{{Foodcourt.id}}" >编辑</ion-button>
      </ion-card-subtitle>
  
    </ion-card>

  </ion-list>
</ion-content>