<ion-header [translucent]="true">
</ion-header>
<ion-content>

  <!-- 根据登录状态显示不同界面 -->
  <div *ngIf="!currentUser?.id"> <!-- 如果没有登录显示未登录界面 -->
    <ion-card>
      <ion-card-header>
        <ion-card-title>未登录</ion-card-title>
        <ion-card-subtitle>请您登录后继续使用</ion-card-subtitle>
      </ion-card-header>
      <ion-button fill="clear" routerLink="/login">登录</ion-button>
    </ion-card>
  </div>

  <div *ngIf="currentUser?.id"> <!-- 如果登录成功显示个人信息界面 -->
    <div class="profile-header">
      <div class="avatar-section">
        <input type="file" (change)="onFileSelected($event)" accept="image/*" id="fileInput" hidden>
        <label for="fileInput">
          <img [src]="user.avatarUrl" alt="Avatar" class="avatar-img">
          <ion-icon name="create-outline" class="edit-icon" routerLink="/edit-info"></ion-icon>
        </label>
      </div>
      <div class="profile-details">
        <div class="username">{{user.name}}</div>
        <div class="campus-building">
          <div class="campus">{{ user.campus }}</div>
          <div class="building">{{ user.building }}</div>
        </div>
        <div class="gender">
          <ion-icon [name]="user.gender === 'male' ? 'man' : 'woman'"></ion-icon>
          <div>{{ user.gender === 'male' ? '男' : '女' }}</div>
        </div>
      </div>
    </div>
  </div>

<!-- 其他功能条目 -->
<ion-list lines="full" class="ion-no-margin" >
  <ion-item routerLink="/mine/completed">
    <ion-icon slot="start" name="checkmark-circle"></ion-icon>
    <ion-label>已完成</ion-label>
    <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
  </ion-item>
  <ion-item routerLink="/mine/in-progress">
    <ion-icon slot="start" name="hourglass"></ion-icon>
    <ion-label>进行中</ion-label>
    <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
  </ion-item>
  <ion-item routerLink="/mine/not-completed">
    <ion-icon slot="start" name="close-circle"></ion-icon>
    <ion-label>未完成</ion-label>
    <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
  </ion-item>
  <ion-item routerLink="/mine/pending">
    <ion-icon slot="start" name="alert-circle"></ion-icon>
    <ion-label>待接单</ion-label>
    <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
  </ion-item>
  <ion-item (click)="logout()" class="logout-button">
    <ion-icon slot="start" routerLink="/login" name="log-out"></ion-icon>
    <ion-label>退出登录</ion-label>
  </ion-item>
</ion-list>
</ion-content>
