<ion-header>
  <ion-toolbar>
    <div class="toolbar-content">
      <div class="button-container">
        <ion-button (click)="goDriftbottle()" fill="clear">
          <ion-icon name="chevron-back" slot="start"></ion-icon>返回
        </ion-button>
      </div>
      <ion-title class="title-text">
        我的漂流瓶
      </ion-title>
    </div>
  </ion-toolbar>
</ion-header>

<!-- <ion-content [fullscreen]="true">
  <section *ngIf="thrownDriftbottles.length > 0">
    <h2 style="margin-left: 16px;">我扔出的漂流瓶</h2>
    <ion-card *ngFor="let bottle of thrownDriftbottles">
      <ion-card-header>
        <ion-card-title>{{ bottle.content }}</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>创建时间: {{ bottle.createdAt }}</p>
      </ion-card-content>
    </ion-card>
  </section> -->

  <section *ngIf="caughtDriftbottles.length > 0">
    <h2 style="margin-left: 16px;">我捞上的漂流瓶</h2>
    <ion-card *ngFor="let bottle of caughtDriftbottles">
      <ion-card-header>
        <ion-card-title>{{ bottle.content }}</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>扔出时间: {{ bottle.createdAt }}</p>
      </ion-card-content>
    </ion-card>
  </section>

  <div style="display: flex; justify-content: center; margin-top: auto;">
    <ion-button (click)="throwNewDriftbottle()" expand="full">
      投掷新的漂流瓶
    </ion-button>
  </div>
</ion-content>