{% extends "base.html" %}

{% block title %}VPN Protocols Configuration - Enterprise VPN Hub{% endblock %}

{% block content %}
<div style="margin-bottom: 1.5rem;">
    <h1 style="font-size: 1.6rem; font-weight: 700;">VPN Protocols & Server Configuration</h1>
    <p style="color: var(--text-muted); font-size: 0.9rem;">Manage supported VPN protocols, listening ports, IP pools, and external endpoints</p>
</div>

<form method="POST" action="/admin/protocols">
    <div class="grid-2">
        <!-- WireGuard Configuration -->
        <div class="card">
            <div class="card-header">
                <div style="display: flex; align-items: center; gap: 0.5rem;">
                    <span style="font-size: 1.4rem;">⚡</span>
                    <h2 class="card-title">WireGuard Protocol</h2>
                </div>
                <label class="checkbox-group" style="margin: 0; cursor: pointer;">
                    <input type="checkbox" name="wireguard_enabled" value="1" {% if settings.get('wireguard_enabled') == '1' %}checked{% endif %}>
                    <span style="font-size: 0.85rem; font-weight: 600;">Enable Service</span>
                </label>
            </div>

            <div class="form-group">
                <label for="wireguard_port">UDP Listening Port</label>
                <input type="number" id="wireguard_port" name="wireguard_port" value="{{ settings.get('wireguard_port', '51820') }}">
            </div>

            <div class="form-group">
                <label for="wireguard_subnet">WireGuard Client Subnet (CIDR)</label>
                <input type="text" id="wireguard_subnet" name="wireguard_subnet" value="{{ settings.get('wireguard_subnet', '10.8.0.0/24') }}">
            </div>

            <div class="form-group">
                <label>Server WireGuard Public Key</label>
                <input type="text" readonly value="{{ settings.get('wireguard_public_key') }}" style="background: rgba(0,0,0,0.4); font-family: monospace;">
                <small style="color: var(--text-muted);">Clients and remote site routers use this public key to connect.</small>
            </div>
        </div>

        <!-- OpenVPN Configuration -->
        <div class="card">
            <div class="card-header">
                <div style="display: flex; align-items: center; gap: 0.5rem;">
                    <span style="font-size: 1.4rem;">🔑</span>
                    <h2 class="card-title">OpenVPN Protocol</h2>
                </div>
                <label class="checkbox-group" style="margin: 0; cursor: pointer;">
                    <input type="checkbox" name="openvpn_enabled" value="1" {% if settings.get('openvpn_enabled') == '1' %}checked{% endif %}>
                    <span style="font-size: 0.85rem; font-weight: 600;">Enable Service</span>
                </label>
            </div>

            <div class="grid-2" style="gap: 1rem;">
                <div class="form-group">
                    <label for="openvpn_port">Port</label>
                    <input type="number" id="openvpn_port" name="openvpn_port" value="{{ settings.get('openvpn_port', '1194') }}">
                </div>
                <div class="form-group">
                    <label for="openvpn_proto">Transport Protocol</label>
                    <select id="openvpn_proto" name="openvpn_proto">
                        <option value="udp" {% if settings.get('openvpn_proto') == 'udp' %}selected{% endif %}>UDP (Recommended)</option>
                        <option value="tcp" {% if settings.get('openvpn_proto') == 'tcp' %}selected{% endif %}>TCP (Firewall traversal)</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="openvpn_subnet">OpenVPN Client Subnet (CIDR)</label>
                <input type="text" id="openvpn_subnet" name="openvpn_subnet" value="{{ settings.get('openvpn_subnet', '10.9.0.0/24') }}">
            </div>

            <div class="form-group">
                <label>Crypto Cipher & Digest</label>
                <input type="text" readonly value="AES-256-GCM / SHA256 (Hardened PKI)" style="background: rgba(0,0,0,0.4);">
            </div>
        </div>
    </div>

    <!-- General Connection Endpoint Settings -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">🌐 External Connection & DNS Settings</h2>
        </div>

        <div class="grid-2">
            <div class="form-group">
                <label for="server_public_ip">Server Public IP or Hostname</label>
                <input type="text" id="server_public_ip" name="server_public_ip" value="{{ settings.get('server_public_ip', '') }}" placeholder="Auto-detected: {{ detected_ip }}">
                <small style="color: var(--text-muted);">
                    Used in client configuration files (.conf and .ovpn). Leave empty to use auto-detected host address (<code>{{ detected_ip }}</code>).
                </small>
            </div>

            <div class="form-group">
                <label for="dns_servers">DNS Servers Pushed to Clients</label>
                <input type="text" id="dns_servers" name="dns_servers" value="{{ settings.get('dns_servers', '1.1.1.1, 8.8.8.8') }}">
                <small style="color: var(--text-muted);">Comma-separated list of DNS resolvers.</small>
            </div>
        </div>

        <div style="text-align: right; margin-top: 1rem;">
            <button type="submit" class="btn btn-primary" style="padding: 0.75rem 1.75rem;">
                💾 Save Protocol Settings
            </button>
        </div>
    </div>
</form>
{% endblock %}