<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      我的
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 顶部照片部分 -->
  <div style="position: relative;">
    <img src="assets/image/bj1.jpg" style="width: 100%; height: 33vh;" />
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
    <ion-avatar>
        <ion-img [src]="user?.id ? 'assets/image/tx2.jpg' : 'assets/image/wdl.jpg'"></ion-img>
      </ion-avatar>
    </div>
    <div style="position: absolute; top: 0; right: 0;">
      <ion-button *ngIf="!user?.id" fill="clear" routerLink="/user/login"color="tertiary" style="font-size: 20px; font-weight: bold;">登录</ion-button>
 </div>
 <div style="position: absolute; bottom: 0; right: 0;">
 <ion-button *ngIf="user?.id" fill="clear" routerLink="/user/edit/info"color="tertiary" style="font-size: 12px; font-weight: bold;">编辑资料</ion-button>
</div>
    <div style="position: absolute; bottom: 0; left: 10px;">
      <p style="line-height: -5; font-weight: bold; color: rgb(255, 253, 253); display: flex; align-items: center;">
        <ion-card-title style="color: #f8f2f2; font-weight: bold;">{{user?.get("username") || '未登录'}}</ion-card-title>
        <ion-icon name="bonfire-outline" style="margin-left: 5px;"></ion-icon>
      </p>
      <p>
        <ion-card-subtitle *ngIf="user?.id" style="color: rgb(243, 243, 248);">{{user?.get("name")}}-{{user?.get("gender")}}</ion-card-subtitle>
      </p>
      <p>
        <ion-card-subtitle *ngIf="user?.id" style="color: rgb(243, 243, 248);">{{user?.get("gxqm")}}</ion-card-subtitle>
      </p>
    </div>
  </div>

  <!-- 下方三个组件：主页、动态、相册 -->
  <ion-row>
    <ion-col>
      <ion-button expand="full" routerLink="/dongt" class="custom-button">动态</ion-button>
    </ion-col>
    <ion-col>
      <ion-button expand="full" routerLink="/favorites" class="custom-button">收藏</ion-button>
    </ion-col>
    <ion-col>
      <ion-button expand="full" routerLink="/album" class="custom-button">相册</ion-button>
    </ion-col>
  </ion-row>

  <ion-card>
    <ion-card-header style="display: flex; flex-direction: row; align-items: center;">
      <ion-icon name="book-outline" style="margin-right: 5px;"></ion-icon> 
      <span>创建我的书影音</span>
    </ion-card-header>
    <ion-card-content>
      添加你最爱的影视，它将会在你的个人主页展示。
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header style="display: flex; flex-direction: row; align-items: center;">
      <ion-icon name="film" style="margin-right: 5px;"></ion-icon> 
      <span>快速记录我看过的影视</span>
    </ion-card-header>
    <ion-card-content>
     让我们来看看你看过那些影片吧！
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header style="display: flex; flex-direction: row; align-items: center;">
      <ion-icon name="earth-outline" style="margin-right: 5px;"></ion-icon> 
      <span> 我的社区</span>
    </ion-card-header>
    <ion-card-content>
      快去社区分享你有趣的故事吧！
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header style="display: flex; flex-direction: row; align-items: center;">
      <ion-icon name="heart-circle-outline" style="margin-right: 5px;"></ion-icon> 
      <span> 创作灵感</span>
    </ion-card-header>
    <ion-card-content>
      拯救没灵感的你，让我们来探索创意的潜力吧！
    </ion-card-content>
    <ion-card>
      <ion-button *ngIf="user?.id" fill="clear" (click)="logout()">登出</ion-button>
    </ion-card>
  </ion-card>
</ion-content>

