{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}VPN · WireGuard Client{% endblock %}
{% block content %}
    {{ page_header('VPN', tabs=tabs, active_tab='wireguard_client') }}
    <div x-data='{
        editOpen: false, pasteOpen: false, pasteText: "",
        publicKey: {{ uplink.hub.public_key | tojson }},
        endpoint: {{ uplink.hub.endpoint | tojson }},
        allowed: {{ uplink.hub.allowed_ips | tojson }},
        keepalive: {{ uplink.hub.persistent_keepalive | tojson }},
        applyPaste() {
            const get = (re) => (this.pasteText.match(re) || [, ""])[1].trim();
            const pub = get(/^\s*PublicKey\s*=\s*(.+)$/mi);
            const ep  = get(/^\s*Endpoint\s*=\s*(.+)$/mi);
            const aip = get(/^\s*AllowedIPs\s*=\s*(.+)$/mi);
            const ka  = get(/^\s*PersistentKeepalive\s*=\s*(\d+)$/mi);
            if (pub) this.publicKey = pub;
            if (ep) this.endpoint = ep;
            if (aip) this.allowed = aip;
            if (ka) this.keepalive = ka;
            this.pasteOpen = false;
            this.pasteText = "";
            window.toast("Fields filled from pasted config — review, then Save");
        },
    }'>
        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 mb-4">
            <div class="flex justify-between items-start mb-3">
                <div><h3 class="font-semibold">This device as a WireGuard client</h3><div class="text-xs text-slate-500">{{ uplink.connection_name }} · dials out to a server · {{ uplink.address }}</div></div>
                <span class="flex items-center gap-2 text-sm">
                    <span class="h-2 w-2 rounded-full {{ 'bg-emerald-500 dot-live text-emerald-500' if uplink.enabled else 'bg-slate-400' }}"></span>{{ uplink.interface_status }}
                </span>
            </div>
            <div class="flex items-center gap-2 mb-3">
                <input readonly value="{{ uplink.public_key }}" class="flex-1 font-mono text-xs bg-slate-50 dark:bg-slate-800 rounded-md p-2 border border-slate-200 dark:border-slate-700">
                <button type="button" onclick="navigator.clipboard.writeText('{{ uplink.public_key }}'); window.toast('Public key copied')" class="px-3 py-1.5 rounded-md border border-slate-200 dark:border-slate-700 text-sm">Copy</button>
            </div>
            <form method="post" action="{{ url_for('vpn_wireguard_client') }}">
                <input type="hidden" name="action" value="{{ 'disable' if uplink.enabled else 'enable' }}">
                <button class="px-3 py-1.5 rounded-md border border-slate-200 dark:border-slate-700 text-sm">{{ 'Disable uplink' if uplink.enabled else 'Enable uplink' }}</button>
            </form>
        </div>

        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5">
            <div class="flex justify-between items-start mb-3">
                <div><h3 class="font-semibold">Server</h3><div class="text-xs text-slate-500">the single remote peer this device tunnels to</div></div>
                <button type="button" @click="editOpen = true" class="px-3 py-1.5 rounded-md border border-slate-200 dark:border-slate-700 text-sm">Edit server connection</button>
            </div>
            <dl class="text-xs font-mono space-y-1">
                <div class="flex justify-between"><dt class="text-slate-500">Endpoint</dt><dd>{{ uplink.hub.endpoint }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Server public key</dt><dd class="truncate ml-4">{{ uplink.hub.public_key }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Allowed IPs</dt><dd>{{ uplink.hub.allowed_ips }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Persistent keepalive</dt><dd>{{ uplink.hub.persistent_keepalive }}s</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Last handshake</dt><dd>{{ uplink.hub.last_handshake or 'never' }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">RX / TX</dt><dd>{{ uplink.hub.rx_bytes }} / {{ uplink.hub.tx_bytes }} B</dd></div>
            </dl>
        </div>

        <div x-show="editOpen" x-transition.opacity class="fixed inset-0 z-40 bg-black/50 flex items-center justify-center p-4" style="display:none" @click.self="editOpen = false">
            <form method="post" action="{{ url_for('vpn_wireguard_client') }}" class="bg-white dark:bg-slate-900 rounded-lg shadow-xl max-w-md w-full p-6 space-y-4">
                <input type="hidden" name="action" value="save_hub">
                <div class="flex justify-between items-start">
                    <h3 class="font-semibold">Edit server connection</h3>
                    <button type="button" @click="pasteOpen = true" class="text-xs px-2 py-1 rounded border border-slate-200 dark:border-slate-700">Paste config…</button>
                </div>
                <div><label class="block text-xs text-slate-500 mb-1">Server public key</label><input name="public_key" required x-model="publicKey" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono"></div>
                <div><label class="block text-xs text-slate-500 mb-1">Endpoint</label><input name="endpoint" required x-model="endpoint" placeholder="server.example.com:51820" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono"></div>
                <div><label class="block text-xs text-slate-500 mb-1">Allowed IPs</label><input name="allowed" required x-model="allowed" placeholder="192.0.2.0/24, 198.51.100.0/24" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono"></div>
                <div><label class="block text-xs text-slate-500 mb-1">Persistent keepalive (s)</label><input name="keepalive" type="number" min="0" x-model="keepalive" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono"></div>
                <div class="flex justify-end gap-2"><button type="button" @click="editOpen = false" class="px-3 py-1.5 text-sm">Cancel</button><button class="btn-primary px-3 py-1.5 rounded-md text-sm">Save</button></div>
            </form>
        </div>

        <div x-show="pasteOpen" x-transition.opacity class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" style="display:none" @click.self="pasteOpen = false">
            <div class="bg-white dark:bg-slate-900 rounded-lg shadow-xl max-w-md w-full p-6 space-y-3">
                <h3 class="font-semibold">Paste server config</h3>
                <p class="text-xs text-slate-500">Paste the <code>[Peer]</code> block the server admin gave you — <code>PublicKey</code>, <code>Endpoint</code>, <code>AllowedIPs</code>, <code>PersistentKeepalive</code> lines are picked out automatically.</p>
                <textarea x-model="pasteText" rows="6" placeholder="[Peer]&#10;PublicKey = ...&#10;Endpoint = server.example.com:51820&#10;AllowedIPs = 192.0.2.0/24, 198.51.100.0/24&#10;PersistentKeepalive = 25" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-xs font-mono"></textarea>
                <div class="flex justify-end gap-2">
                    <button type="button" @click="pasteOpen = false; pasteText = ''" class="px-3 py-1.5 text-sm">Cancel</button>
                    <button type="button" @click="applyPaste()" class="btn-primary px-3 py-1.5 rounded-md text-sm">Fill fields</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}