<ion-header [translucent]="true">
    <ion-toolbar>
      <ion-title size="large">个人中心</ion-title>
    </ion-toolbar>
</ion-header>
  
<ion-content [fullscreen]="true">


    <!-- 未登录 -->
    @if(!currentUser?.id){
      <div class="profile-container1">
        <div class="avatar-container">
          <ion-avatar class="avatar">
            <img [src]="avatarUrl" alt="avatar">
          </ion-avatar>
          <div class="user-info">
              <ion-label class="username"><a (click)="login()">登录</a><a>/</a><a (click)="signup()">注册</a></ion-label>
          </div>
        
        </div>
        <ion-label class="bio">个人简介： '请登录后查看' </ion-label>
        
      </div>
    }

<!-- 已登录 -->
@if(currentUser?.id){
    <div class="profile-container">
      <div class="avatar-container">
        <ion-avatar class="avatar">
          <img [src]="currentUser?.get('avatar') || avatarUrl" alt="avatar">
        </ion-avatar>
        <div class="user-info">
          <ion-label class="username">{{ currentUser?.get("username") }}</ion-label>
          </div>

      </div>
                <ion-label class="bio">性别：{{ currentUser?.get("gender") || '-' }}  年龄：{{ currentUser?.get("age") || '-' }}</ion-label>
                <ion-label class="bio">个人简介：{{ currentUser?.get("bio") || '暂无简介' }}</ion-label>
                <ion-label class="edit" (click)="editUser()" >点击这里编辑资料</ion-label>
          <ion-button class="button" (click)="logout()">退出登录</ion-button>

    </div>
  } 

   <div class="settings-container">
     <!-- Casting $event to $any is a temporary fix for this bug https://github.com/ionic-team/ionic-framework/issues/24245 -->
     <ion-reorder-group [disabled]="isDisabled" (ionItemReorder)="handleReorder($any($event))">
    
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label (click)="goToMyposts()">我的动态</ion-label>
            <ion-reorder  name="footsteps-outline"></ion-reorder>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label (click)="goToHistory()">历史记录</ion-label>
            <ion-reorder name="footsteps-outline" ></ion-reorder>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
             <ion-label (click)="goToLike()">点赞</ion-label>
             <ion-reorder name="bookmark-outline" ></ion-reorder>
        </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label (click)="goToPrivacy()">隐私与安全设置</ion-label>
            <ion-reorder name="lock-closed-outline" ></ion-reorder>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label (click)="goToSetting()">个性化偏好设置</ion-label>
            <ion-reorder name="settings" ></ion-reorder>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label (click)="goToInform()">通知与消息管理</ion-label>
            <ion-reorder  name="notifications-outline"></ion-reorder>
          </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-item>
            <ion-label (click)="goToHelp()">设置与帮助</ion-label>
            <ion-reorder name="help-circle" ></ion-reorder>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-reorder-group>
    </div>
  
  
  <ion-button (click)="toggleReorder()"> Toggle Reorder </ion-button>


</ion-content>