<ion-content [fullscreen]="true" class="ion-padding">
  <ion-header [translucent]="true">
    <ion-toolbar color="primary">
      <ion-title>我的资料</ion-title>
    </ion-toolbar>
  </ion-header>

  <div class="profile-section">
    @if(currentUser?.id){
    <!-- 已登录状态 -->
    <ion-card>
      <ion-card-header>
        <ion-avatar class="profile-avatar">
          <img [src]="currentUser?.get('avatar') || 'assets/icon/avatar-default.png'" alt="用户头像" />
        </ion-avatar>
        <ion-card-title class="ion-text-center">
          {{currentUser?.get("username")}}
        </ion-card-title>
        <ion-card-subtitle class="ion-text-center">
          {{currentUser?.get('realname') || '未设置姓名'}}
        </ion-card-subtitle>
      </ion-card-header>

      <ion-card-content>
        <ion-list lines="none">
          <ion-item>
            <ion-icon name="person-outline" slot="start"></ion-icon>
            <ion-label>性别</ion-label>
            <ion-note slot="end">{{currentUser?.get('gender') || '未设置'}}</ion-note>
          </ion-item>
          <ion-item>
            <ion-icon name="calendar-outline" slot="start"></ion-icon>
            <ion-label>年龄</ion-label>
            <ion-note slot="end">{{currentUser?.get('age') || '未设置'}}</ion-note>
          </ion-item>
        </ion-list>

        <ion-button expand="block" (click)="edit()" color="primary">
          <ion-icon name="create-outline" slot="start"></ion-icon>
          编辑资料
        </ion-button>
        <ion-button expand="block" (click)="logout()" color="danger" fill="outline">
          <ion-icon name="log-out-outline" slot="start"></ion-icon>
          登出
        </ion-button>
      </ion-card-content>
    </ion-card>
    }
    @if(!currentUser?.id){
    <!-- 未登录状态 -->
    <div class="login-prompt">
      <ion-icon name="person-circle-outline" class="login-icon"></ion-icon>
      <h2>您还未登录</h2>
      <p>登录后可以保存您的个人资料</p>
      <ion-button expand="block" (click)="login()" color="primary">
        <ion-icon name="log-in-outline" slot="start"></ion-icon>
        登录用户 abc 1234
      </ion-button>
    </div>
    }
  </div>
</ion-content>