{% extends 'base.html' %}
{% block title %}{% if is_edit %}编辑套餐{% else %}新建套餐{% endif %}{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <h3>{% if is_edit %}编辑套餐{% else %}新建套餐{% endif %}</h3>
  <div>
    <a class="btn btn-outline-secondary" href="{% url 'admin_panel:plans' %}">返回套餐列表</a>
  </div>
</div>

<form method="post" novalidate>
  {% csrf_token %}
  <div class="mb-3">
    <label class="form-label">名称</label>
    {{ form.name }}
    {% if form.name.errors %}<div class="text-danger small">{{ form.name.errors|join:', ' }}</div>{% endif %}
  </div>
  <div class="mb-3">
    <label class="form-label">描述</label>
    {{ form.description }}
  </div>
  <div class="row">
    <div class="col-md-4 mb-3">
      <label class="form-label">计费模式</label>
      {{ form.billing_mode }}
    </div>
    <div class="col-md-4 mb-3">
      <label class="form-label">月费（每域名）</label>
      {{ form.base_price_per_domain }}
    </div>
    <div class="col-md-4 mb-3">
      <label class="form-label">包含流量(GB)</label>
      {{ form.included_traffic_gb_per_domain }}
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 mb-3">
      <label class="form-label">超量单价（元/GB）</label>
      {{ form.overage_price_per_gb }}
    </div>
    <div class="col-md-8 mb-3">
      <label class="form-label">功能配置（JSON）</label>
      {{ form.features }}
      <div class="form-text">示例：{"waf_enabled": true, "http3_enabled": false}</div>
    </div>
  </div>

  <div class="mb-3">
    <h5 class="mb-2">可视化功能（推荐）</h5>
    <div class="row gx-3 gy-2">
      <div class="col-md-2 form-check">
        {{ form.waf_enabled }}
        <label class="form-check-label">启用 WAF</label>
      </div>
      <div class="col-md-2 form-check">
        {{ form.http3_enabled }}
        <label class="form-check-label">启用 HTTP/3</label>
      </div>
      <div class="col-md-2 form-check">
        {{ form.websocket_enabled }}
        <label class="form-check-label">启用 WebSocket</label>
      </div>
      <div class="col-md-2 form-check">
        {{ form.realtime_logs_enabled }}
        <label class="form-check-label">实时日志</label>
      </div>
      <div class="col-md-2 form-check">
        {{ form.custom_ssl_enabled }}
        <label class="form-check-label">自定义 SSL</label>
      </div>
      <div class="col-md-2">
        <label class="form-label">页面规则数量上限</label>
        {{ form.page_rules_limit }}
      </div>
    </div>
    <div class="form-text mt-1">勾选将同步写入 JSON 字段；可选 JSON 保留高级配置。</div>
  </div>

  <div class="row mb-3">
    <div class="col-md-2 form-check">
      {{ form.allow_overage }}
      <label class="form-check-label">允许超量计费</label>
    </div>
    <div class="col-md-2 form-check">
      {{ form.is_active }}
      <label class="form-check-label">启用</label>
    </div>
    <div class="col-md-2 form-check">
      {{ form.is_public }}
      <label class="form-check-label">公开</label>
    </div>
    <div class="col-md-3 form-check">
      {{ form.allow_new_purchase }}
      <label class="form-check-label">允许新购</label>
    </div>
    <div class="col-md-3 form-check">
      {{ form.allow_renew }}
      <label class="form-check-label">允许续费</label>
    </div>
  </div>

  <button type="submit" class="btn btn-primary">{% if is_edit %}保存修改{% else %}创建套餐{% endif %}</button>
</form>
{% endblock %}