<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>升级套餐 - {{ domain.name }}</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">PyGoEdge 面板</a>
    <div class="d-flex gap-2">
      <a class="btn btn-outline-light" href="/domains/">域名</a>
      <a class="btn btn-outline-light" href="/plans/">套餐</a>
      <a class="btn btn-outline-light" href="/admin/">Admin</a>
    </div>
  </div>
</nav>

<div class="container" style="max-width: 860px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3>升级套餐：{{ domain.name }}</h3>
    <a href="{% url 'domains:detail' domain_id=domain.id %}" class="btn btn-outline-secondary">返回详情</a>
  </div>

  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags }}">{{ message }}</div>
    {% endfor %}
  {% endif %}

  <form method="post" onsubmit="return confirm('确认将该域名升级到所选套餐？');">
    {% csrf_token %}
    <div class="alert alert-warning">提示：功能开关将立即按新套餐生效；计费按默认规则在下一个周期计算（当前周期不追溯调整）。</div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>选择</th>
          <th>名称</th>
          <th>月费（/域名）</th>
          <th>包含流量（GB）</th>
          <th>超量单价（元/GB）</th>
          <th>功能</th>
        </tr>
      </thead>
      <tbody>
        {% for p in plans %}
        <tr>
          <td>
            <input type="radio" name="plan_id" value="{{ p.id }}" required {% if domain.current_plan and domain.current_plan.id == p.id %}disabled{% endif %} />
          </td>
          <td>{{ p.name }}</td>
          <td>{{ p.base_price_per_domain }}</td>
          <td>{{ p.included_traffic_gb_per_domain }}</td>
          <td>{{ p.overage_price_per_gb }}</td>
          <td>
            {% if p.features %}
              <span class="badge bg-secondary me-1">WAF: {% if p.features.waf_enabled %}✔{% else %}✖{% endif %}</span>
              <span class="badge bg-secondary me-1">HTTP/3: {% if p.features.http3_enabled %}✔{% else %}✖{% endif %}</span>
              <span class="badge bg-secondary me-1">日志: {% if p.features.logs_enabled %}✔{% else %}✖{% endif %}</span>
            {% else %}
              -
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="6" class="text-center">暂无可升级的公开套餐</td></tr>
        {% endfor %}
      </tbody>
    </table>
    <button type="submit" class="btn btn-primary">确认升级</button>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>