{% extends 'base.html' %}
{% block content %}
<div class="page-header">
  <h2>Новый peer</h2>
</div>

<div class="card form-card">
  <form method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="form-group">
      <label>Имя клиента</label>
      <input type="text" name="name" placeholder="например: phone-ruslan" autofocus required />
    </div>

    <div class="form-group">
      <label>Режим</label>
      <div class="radio-group">
        <label class="radio-label">
          <input type="radio" name="mode" value="full" checked onchange="toggleRoutes(this)">
          <span>Полный туннель (0.0.0.0/0)</span>
        </label>
        <label class="radio-label">
          <input type="radio" name="mode" value="split" onchange="toggleRoutes(this)">
          <span>Split-tunnel (только нужные сети)</span>
        </label>
      </div>
    </div>

    <div class="form-group" id="allowed-ips-group" style="display:none">
      <label>AllowedIPs для клиента</label>
      <input type="text" name="allowed_ips" placeholder="{{ meta.get('WG_NETWORK','10.66.66.0/24') }}" />
      <small>Через запятую. Оставьте пустым — подставится сеть WG.</small>
    </div>

    <div class="form-group">
      <label>Дополнительные роуты (advertised)</label>
      <input type="text" name="routes" placeholder="192.168.1.0/24, 10.0.0.0/8" />
      <small>Сети, которые клиент анонсирует другим участникам. Необязательно.</small>
    </div>

    <div class="form-actions">
      <button type="submit" class="btn btn-primary">Создать peer</button>
      <a href="{{ url_for('index') }}" class="btn">Отмена</a>
    </div>
  </form>
</div>

<script>
function toggleRoutes(el) {
  document.getElementById('allowed-ips-group').style.display =
    el.value === 'split' ? 'block' : 'none';
}
</script>
{% endblock %}