{% extends "base.html" %}
{% set title = "我的" %}
{% set page = "me" %}

{% block content %}
<section class="page-header" style="background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%); color: white; padding: 60px 20px; border-radius: 20px; text-align: center; margin-bottom: 32px; box-shadow: var(--shadow-lg);">
  <h1 style="font-size: 2.5rem; margin-bottom: 16px; color: white;"><i class="ri-user-settings-fill" style="margin-right:8px; opacity:0.9;"></i>个人中心</h1>
  <p style="font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto;">管理您的账户信息和订单记录</p>
</section>

<div id="meMsg" class="form-msg" style="display:none; margin-bottom: 24px;"></div>

<div class="split" style="gap: 32px; align-items: start;">
  <div class="card" style="padding: 32px; border-radius: 16px; box-shadow: var(--shadow-md);">
    <h3 style="display: flex; align-items: center; gap: 8px; margin-top: 0; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border);">
      <i class="ri-profile-line" style="color: var(--brand);"></i> 账户信息
    </h3>
    <div id="meInfo" style="font-size: 1.1rem; line-height: 1.8; margin-bottom: 32px;"></div>
    <div class="toolbar" style="margin-top: 0; padding-top: 24px; border-top: 1px solid var(--border);">
      <a href="{{ url_for('page_vip') }}" class="btn btn-primary" style="display: flex; align-items: center; gap: 4px;">
        <i class="ri-vip-crown-line"></i> 购买/续费会员
      </a>
    </div>
  </div>

  <div id="orderSection" style="display: flex; flex-direction: column; gap: 32px;">
    <div class="card" style="padding: 32px; border-radius: 16px; box-shadow: var(--shadow-md); height: 100%;">
      <h3 style="display: flex; align-items: center; gap: 8px; margin-top: 0; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border);">
        <i class="ri-file-list-3-line" style="color: var(--brand);"></i> 我的订单
      </h3>
      <div id="orderList" class="list" style="display: flex; flex-direction: column; gap: 16px;"></div>
    </div>

    <div id="downloadSection" class="card" style="padding: 32px; border-radius: 16px; box-shadow: var(--shadow-md); height: 100%;">
      <h3 style="display: flex; align-items: center; gap: 8px; margin-top: 0; margin-bottom: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border);">
        <i class="ri-download-cloud-2-line" style="color: var(--brand);"></i> 下载记录
      </h3>
      <div class="muted" style="margin-bottom: 16px;">仅用于查看记录，不支持从此处二次下载。</div>
      <div id="downloadList" class="list" style="display: flex; flex-direction: column; gap: 12px;"></div>
      <div id="downloadPager" class="toolbar" style="justify-content: space-between; margin-top: 16px;"></div>
    </div>
  </div>
</div>
{% endblock %}