{% extends "base.html" %}
{% block title %}我的服务 · WK1NG VPN{% endblock %}
{% block content %}
<section class="page-heading"><div><p class="eyebrow">个人控制台</p><h1>我的服务</h1><p>服务状态、付款申请和订阅地址都在这里。</p></div><a class="button secondary" href="/billing">购买或续费 →</a></section>
<div class="dashboard-grid">
  <section class="panel feature-panel"><div class="section-row"><span class="pill">当前状态</span><span class="subtle">WK1NG VPN</span></div>
    {% if service %}
      <h2>{% if service.status == 'active' %}服务已开通{% else %}服务状态：{{ service.status }}{% endif %}</h2>
      <p>订阅地址可导入到你使用的客户端。</p>
      <div class="service-metrics"><div><span>已用流量</span><strong>{{ service.used_traffic|fmt_bytes }}</strong></div><div><span>总流量</span><strong>{{ service.data_limit|fmt_bytes }}</strong></div><div><span>到期时间</span><strong>{{ service.expire|fmt_time }}</strong></div></div>
      {% if service.subscription_url %}<label class="copy-field">订阅地址<input value="{{ service.subscription_url }}" readonly onclick="this.select()" aria-label="订阅地址，点击可选中"></label><p class="hint">请妥善保管订阅地址，任何持有链接的人都可能使用你的线路。</p>{% endif %}
    {% else %}<h2>服务尚未开通</h2><p>完成邮箱验证后，扫描收款码并提交付款确认。管理员核对到账后会为你开通。</p><a class="button primary" href="/billing">查看付款方式 <span aria-hidden="true">→</span></a>{% endif %}
    {% if engine_error %}<div class="alert error">{{ engine_error }}</div>{% endif %}
  </section>
  <aside class="panel"><p class="card-kicker">开通流程</p><h3>每一步都清楚</h3><ol class="steps"><li><span>01</span><div><strong>注册与验证</strong><small>用邮箱建立你的账号</small></div></li><li><span>02</span><div><strong>付款并提交</strong><small>扫码后回到页面确认</small></div></li><li><span>03</span><div><strong>管理员核款</strong><small>到账后开通线路</small></div></li></ol></aside>
</div>
<section class="panel table-panel"><div class="section-row"><div><p class="card-kicker">交易记录</p><h2>付款申请</h2></div><a href="/billing" class="text-link">查看收款方式 →</a></div>
  {% if payments %}<div class="table-wrap"><table><thead><tr><th>编号</th><th>提交时间</th><th>金额</th><th>状态</th></tr></thead><tbody>{% for payment in payments %}<tr><td>#{{ payment.id }}</td><td>{{ payment.submitted_at|fmt_time }}</td><td>{{ payment.amount }}</td><td><span class="status {{ payment.status }}">{% if payment.status == 'approved' %}已开通{% elif payment.status == 'rejected' %}未通过{% elif payment.status == 'processing' %}处理中{% else %}待管理员确认{% endif %}</span></td></tr>{% endfor %}</tbody></table></div>
  {% else %}<div class="empty-state"><strong>还没有申请记录</strong><p>付款后在购买页面提交确认申请。</p></div>{% endif %}
</section>
{% endblock %}