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

  <ion-toolbar>
    <ion-buttons slot="start" (click)="GoToLoginPage()">
      <ion-button>
        <ion-icon name="settings-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>个人中心</ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="mail-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content>
  <!-- 个人信息 -->
    <ion-card-content>

      <ion-row class="user-info-row">
        <ion-col size="auto" class="enlarge-col">
          <ion-avatar (click)="fileInput.click()">
            <ion-img [src]="userImage" style="width: 80px; height: 80px;"></ion-img>
          </ion-avatar>
          <input type="file" #fileInput (change)="onFileSelected($event)" style="display: none">

        </ion-col> 
        <ion-col size="auto" class="info-col" style="margin-left: 30px;">
          <ion-label><h1>{{user?.get('username') || '未登录'}}</h1></ion-label>
          <ion-label>ID: {{user?.id || '-'}}</ion-label>
          &nbsp;
          <ion-label>IP属地: 南昌</ion-label>
        </ion-col> 
      </ion-row>

      <ion-row>
        <ion-col>
          <ion-label>关注: 7</ion-label>
        </ion-col>
        <ion-col>
          <ion-label>粉丝: 0</ion-label>
        </ion-col>
        <ion-col>
          <ion-label>获赞: 0</ion-label>
        </ion-col>
      </ion-row>
    </ion-card-content>

    
  <div class="middle-section">
    <ion-card *ngFor="let card of cards" class="order-card">
      <ion-card-header>
        <span style="font-size: 16px;">{{ card.title }}</span>
      </ion-card-header>
      <ion-card-content>
        <span style="font-size: 14px;">{{ card.content }}</span>
      </ion-card-content>
    </ion-card>
  </div> 


  <ion-content>
    <ion-segment [(ngModel)]="currentTab">
      <ion-segment-button value="unpublished">
        未发布
      </ion-segment-button>
      <ion-segment-button value="published">
        已发布
      </ion-segment-button>
      <ion-segment-button value="liked">
        点赞
      </ion-segment-button>
      <ion-segment-button value="favorited">
        收藏
      </ion-segment-button>
    </ion-segment>
  
    <ion-card *ngIf="currentTab === 'unpublished'">
      <img src="https://gd-hbimg.huaban.com/068da346d1fbca8edd952fb7e77b0eb0468ac03512a0f-Rm3mAD_fw658webp" class="img-center" style="width: 300px; height: 300px;">
      <div class="center-text">
        暂无内容
      </div>
    </ion-card>
  

    <ion-item *ngIf="currentTab === 'published'" class="custom-title">
      <ion-row>
        <ion-col size="6" *ngFor="let CreatContent of InputContentsList" class="custom-col">
          <ion-card class="custom-card">
            <img *ngIf="!hasData" src="https://gd-hbimg.huaban.com/068da346d1fbca8edd952fb7e77b0eb0468ac03512a0f-Rm3mAD_fw658webp" class="img-center" style="width: 100%; height: 200px;">
            <div class="center-text" *ngIf="!hasData">暂无内容</div>
            <h2 class="custom-header">
              {{CreatContent.get("title")}}
            </h2>
            <p>{{CreatContent.get("contents")}}</p>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-item>
  
    <div *ngIf="currentTab === 'liked'">
      <div class="center-text">
        <h1>点赞内容</h1>
      </div>
    </div>
  
    <div *ngIf="currentTab === 'favorited'">
      <div class="center-text">
        <h1>收藏内容</h1>
      </div>
    </div>
  </ion-content>

  <div class="footer">
    <button class="create-button" (click)="navigateToCreatePage()">创建内容</button>
  </div>

</ion-content>