{% extends 'base.html' %}
{% block content %}
<h2>Новый peer</h2>
<form method="post" class="card">
  <label>Имя клиента
    <input name="name" required placeholder="astra" />
  </label>
  <label>Режим
    <select name="mode" id="mode">
      <option value="full">full (весь трафик через VPN)</option>
      <option value="split">split (только выбранные сети)</option>
    </select>
  </label>
  <label>AllowedIPs (для split)
    <input
      id="allowed_ips"
      name="allowed_ips"
      placeholder="{{ meta.get('WG_NETWORK','10.66.66.0/24') }}"
      data-default="{{ meta.get('WG_NETWORK','10.66.66.0/24') }}"
    />
  </label>
  <label>Сети за клиентом (роуты)
    <input name="routes" placeholder="192.168.33.0/24,10.10.0.0/16" />
  </label>
  <button type="submit">Создать</button>
</form>
<script>
(() => {
  const mode = document.getElementById("mode");
  const allowed = document.getElementById("allowed_ips");
  const def = allowed.dataset.default || "10.66.66.0/24";

  function syncAllowed() {
    if (mode.value === "split") {
      if (!allowed.value.trim()) allowed.value = def;
      allowed.readOnly = false;
    } else {
      allowed.readOnly = true;
    }
  }

  mode.addEventListener("change", syncAllowed);
  syncAllowed();
})();
</script>
{% endblock %}