{% extends 'base.html' %}
{% block title %}添加域名{% endblock %}
{% block content %}
<div class="container" style="max-width: 860px;">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h3>添加域名</h3>
    <div>
      <a class="btn btn-outline-secondary" href="{% url 'domains:list' %}">返回列表</a>
      <a class="btn btn-outline-secondary" href="/plans/">查看套餐</a>
    </div>
  </div>

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

  <form method="post" class="needs-validation" novalidate>
    {% csrf_token %}
    {{ form.non_field_errors }}

    <div class="mb-3">
      <label class="form-label" for="id_name">主域名</label>
      {{ form.name }}
    </div>

    <div class="mb-3">
      <label class="form-label" for="id_subdomains">接入子域名（逗号分隔）</label>
      {{ form.subdomains }}
      <div class="form-text">例如：www,static</div>
    </div>

    <div class="row">
      <div class="col-md-6 mb-3">
        <label class="form-label" for="id_origin_host">源站地址</label>
        {{ form.origin_host }}
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label" for="id_origin_protocol">协议</label>
        {{ form.origin_protocol }}
      </div>
      <div class="col-md-3 mb-3">
        <label class="form-label" for="id_origin_port">端口</label>
        {{ form.origin_port }}
      </div>
    </div>

    <div class="row">
      <div class="col-md-6 mb-3">
        <label class="form-label" for="id_plan">套餐</label>
        {{ form.plan }}
      </div>
      <div class="col-md-6 mb-3 form-check">
        {{ form.enable_websocket }}
        <label class="form-check-label">启用 WebSocket</label>
      </div>
    </div>

    <div class="mb-3">
      <button type="submit" class="btn btn-primary">创建</button>
      <a href="{% url 'domains:list' %}" class="btn btn-secondary">取消</a>
    </div>
  </form>

  <div class="alert alert-info mt-4">
    创建成功后系统会自动跳转到域名详情页：
    在详情页可查看生成的 CNAME 目标，并可点击“检测 DNS 生效”按钮进行验证。
    如未设置套餐将默认使用系统配置的免费额度（可在运营面板调整）。
  </div>
</div>
{% endblock %}