<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="goToTab4()" fill="clear">
        <ion-icon name="arrow-back"></ion-icon> <!-- 使用一个箭头图标 -->
      </ion-button>
    </ion-buttons>
    <ion-title>注册</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <!-- 用户登录状态 -->
  <ion-card>
    <!-- 未登录 -->
    @if(!currentUser?.id){
    <ion-card-header>
      <ion-card-title>请登录</ion-card-title>
      <ion-card-subtitle>暂无信息</ion-card-subtitle>
    </ion-card-header>
    }
    <!-- 未登录 -->
    @if(currentUser?.id){
    <ion-card-header>
      <div style="display: flex; align-items: center;">
      <img [src]="currentUser?.get('avatar')" alt="头像" style="width: 50px; height: 50px; border-radius: 50%; margin-right: 10px;">
      <div>
        <ion-card-title>{{ currentUser?.get("username") }}
          {{ currentUser?.get("realname") }}</ion-card-title>
        <ion-card-subtitle style="font-size: 18px;">性别:{{ currentUser?.get("gender") || "-" }} 年龄:{{
            currentUser?.get("age") || "-"
          }}</ion-card-subtitle>
      </div>
    </div>
    </ion-card-header>
    }
    <ion-card-content>
      @if(!currentUser?.id){
      <ion-button expand="block" (click)="signup()" class="register">注册</ion-button>
      <ion-button expand="block" (click)="login()" class="login">登录</ion-button>
      } @if(currentUser?.id){
      <ion-button expand="block" (click)="editUser()" class="edit">编辑资料</ion-button>
      <ion-button expand="block" (click)="logout()" color="light" class="logout">登出</ion-button
      >
      }
    </ion-card-content>
  </ion-card></ion-content>
