<div class="page-mine">
  <div class="profile-section">
    <div class="profile-avatar">
      <img src="../../assets/images/slide1.jpg" alt="Avatar">
    </div>
    <div class="profile-info">
      <h2>{{ userName }}</h2>
      <p>{{ userGender }}</p>
      <p>{{ userAddress }}</p>
    </div>
  </div>

  <div class="actions-section">
    <button class="login-button" (click)="login()">登录</button>
    <!-- <button class="logout-button" (click)="logout()">注销</button> -->
    <button class="edit-profile-button" (click)="editProfile()">修改个人信息</button>
  </div>

  <div class="tabs-section">
    <ul class="tabs">
      <li (click)="changeTab('history')" [class.active]="activeTab === 'history'">观看历史</li>
      <li (click)="changeTab('favorites')" [class.active]="activeTab === 'favorites'">我的收藏</li>
      <li (click)="changeTab('following')" [class.active]="activeTab === 'following'">我的关注</li>
    </ul>

    <div class="tab-content">
      <div *ngIf="activeTab === 'history'">
        <h3>观看历史</h3>
        <ul>
          <li *ngFor="let video of history">{{ video }}</li>
        </ul>
      </div>
      <div *ngIf="activeTab === 'favorites'">
        <h3>我的收藏</h3>
        <ul>
          <li *ngFor="let video of favorites">{{ video }}</li>
        </ul>
      </div>
      <div *ngIf="activeTab === 'following'">
        <h3>我的关注</h3>
        <ul>
          <li *ngFor="let user of following">{{ user }}</li>
        </ul>
      </div>
    </div>
  </div>

   <!-- 修改个人信息的弹窗 -->
   <div class="edit-profile-modal" [class.show]="showEditProfileModal">
    <div class="edit-profile-modal-content">
      <h2>修改个人信息</h2>
      <form (submit)="saveProfile()" #profileForm="ngForm">
        <label>
          用户名:
          <input type="text" [(ngModel)]="newUserName" name="newUserName" required maxlength="9">
        </label>
        <label>
          性别:
          <select [(ngModel)]="newUserGender" name="newUserGender" required>
            <option value="">请选择</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </label>
        <label>
          省份:
          <select [(ngModel)]="newUserAddress" name="newUserAddress" required>
            <option value="">请选择</option>
            <option *ngFor="let city of cities" [value]="city">{{ city }}</option>
          </select>
        </label>
        <div class="error-message" *ngIf="!profileForm.form.valid && profileForm.submitted">
          请填写完整的个人信息
        </div>
        <button type="submit" [disabled]="!profileForm.form.valid">保存</button>
        <button type="button" (click)="cancelEditProfile()">取消</button>
      </form>
    </div>
  </div>
</div>