{% extends "base.html" %}
{% block title %}WireGuard VPN 설정 - 리얼컴 NAS UI{% endblock %}
{% block content %}
<div class="container">
  <div class="panel" style="width:380px;">
    <h2>서버 정보</h2>
    <form method="post">
      <div style="margin-bottom:6px;">
        <label>공인 IP/DDNS</label>
        <input type="text" name="server_ip" value="{{server_ip or ''}}" style="width:140px;">
        <label>VPN포트</label>
        <input type="number" name="server_port" value="{{server_port or 51820}}" style="width:65px;">
      </div>
      <div>
        <label>네트워크대역</label>
        <input type="text" name="vpn_subnet" value="{{vpn_subnet or '10.8.0.0/24'}}" style="width:100px;">
      </div>
      <div style="margin-top:8px;">
        <button type="submit" name="action" value="save_server" class="edit-btn">서버설정 저장</button>
        <button type="submit" name="action" value="restart_wg" class="edit-btn">VPN서버 재시작</button>
      </div>
      <div class="small" style="margin-top:6px;">서버공개키: <span style="font-size:8px">{{server_pub}}</span></div>
    </form>
  </div>
  <div class="panel">
    <h2>클라이언트 생성</h2>
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        <ul>
        {% for category, msg in messages %}
        <li style="color:{% if category=='error' %}#e81c3d{% else %}#299e40{% endif %};">{{msg}}</li>
        {% endfor %}
        </ul>
    {% endif %}
    {% endwith %}
    <form method="post" style="display:flex; gap:4px;">
        <input type="text" name="client_name" placeholder="클라이언트 이름">
        <button type="submit" name="action" value="add_client">생성</button>
    </form>
    <div class="small" style="margin-top:10px;">
        등록된 클라이언트:
        {% if clients %}
            {% for c in clients %}
            <div style="border:1px solid #eee; padding:8px; margin:8px 0;">
                <b>{{c}}</b>
                <a href="?show={{c}}">보기</a>
                <a href="?download={{c}}">다운로드</a>
                <a href="?delete={{c}}" style="color:red;">삭제</a>
                {% if conf_text and request.args.get('show') == c %}
                    <pre>{{conf_text}}</pre>
                    {% if qrcode %}
                        <img src="data:image/png;base64,{{qrcode}}" style="margin-top:10px;"><br>
                        <a href="{{ url_for('vpn_qr_download', client_name=c) }}"
                           class="edit-btn"
                           style="margin-top:8px;display:inline-block;">
                           QR 다운로드 (JPG)
                        </a>
                    {% endif %}
                {% endif %}
            </div>
            {% endfor %}
        {% else %}
            <div class="small">등록된 클라이언트 없음</div>
        {% endif %}
    </div>
  </div>
</div>
{% endblock %}