<ion-header [translucent]="true">
  <ion-toolbar class="custom-toolbar">
    <ion-buttons slot="start">
      <ion-back-button default-href="/tabs/tab5" style="color:black;"></ion-back-button>
    </ion-buttons>
    @if(!currentUser?.id){
    <ion-title class="custom-title">
      用户登录注册
    </ion-title>
    }
    @if(currentUser?.id){
    <ion-title class="custom-title">
      个人信息
    </ion-title>
    }
  </ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" style="padding-top: 3px;">

  <!-- 用户登录状态 -->
  <ion-card style="height: 90%;width: 90%;">
    <!-- 未登录 -->
    @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 class="card-header">
      <img [src]="currentUser?.get('avatar')|| '../../assets/image/doctor7.png'" alt="头像" class="avatar" />
      <div class="user-info">
        <ion-card-title>账号：{{currentUser?.get("username")}}</ion-card-title>
        <ion-card-subtitle>
          姓名: {{currentUser?.get("realname") || "-"}}
          性别: {{currentUser?.get("gender") || "-"}}
          年龄: {{currentUser?.get("age") || "-"}}
        </ion-card-subtitle>
      </div>
    </ion-card-header>
    }
    <ion-card-content>
      @if(!currentUser?.id){
      <ion-button expand="block" (click)="signup()" color="success">注册</ion-button>
      <ion-button expand="block" (click)="login()" color="success">登录</ion-button>
      }
      @if(currentUser?.id){
      <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
      <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
      }
    </ion-card-content>
  </ion-card>
  @if(currentUser?.id){
  <ion-card class="memo-card">
    <h2 class="memo-title">健康备忘录</h2>
    <p class="memo-description">写下您问诊的医生名或者心动的科普知识，便于您下次查找（点击标签可删除）</p>
    <edit-tag (onTagChange)="setTagsValue($event)"></edit-tag>

    <h2 class="memo-title">收藏夹</h2>
    <ul class="tag-list">
      @for(tag of editTags; track tag;){
      <li class="tag-item">{{tag}}</li>
      }
    </ul>
  </ion-card>
  }
</ion-content>