{% extends "base.html" %}

{% block title %}My VPN Profile - Enterprise VPN Hub{% endblock %}

{% block content %}
<div style="margin-bottom: 2rem;">
    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
        <div>
            <h1 style="font-size: 1.8rem; font-weight: 700;">Welcome, {{ user['username'] }}</h1>
            <p style="color: var(--text-muted); font-size: 0.95rem; margin-top: 0.25rem;">
                Here are your personal credentials and instructions to connect your devices to the Enterprise VPN Service.
            </p>
        </div>
        <div>
            <span class="badge badge-success" style="font-size: 0.9rem; padding: 0.4rem 0.8rem;">
                Account Status: Active
            </span>
        </div>
    </div>

    <div style="background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.2); border-radius: 8px; padding: 1rem; margin-top: 1rem; display: flex; gap: 2rem; font-size: 0.9rem;">
        <div>
            <span style="color: var(--text-muted);">Main Corporate Network:</span>
            <strong style="color: #60a5fa; margin-left: 0.5rem;">{{ main_subnet }}</strong>
        </div>
        <div>
            <span style="color: var(--text-muted);">Internet Access Mode:</span>
            <strong style="color: #34d399; margin-left: 0.5rem;">
                {% if internet_mode == 'vpn_server' %}Through VPN Server
                {% elif internet_mode == 'main_network' %}Through Headquarters Gateway
                {% else %}Split-Tunnel (Company Internal Only)
                {% endif %}
            </strong>
        </div>
    </div>
</div>

<!-- ================= WIREGUARD SECTION ================= -->
{% if user['allowed_wireguard'] == 1 %}
<div class="card" style="border-top: 4px solid var(--primary);">
    <div class="card-header">
        <div style="display: flex; align-items: center; gap: 0.75rem;">
            <span style="font-size: 1.8rem;">⚡</span>
            <div>
                <h2 class="card-title">WireGuard VPN Connection</h2>
                <p style="color: var(--text-muted); font-size: 0.85rem;">Fastest modern protocol with state-of-the-art cryptography</p>
            </div>
        </div>
        <div>
            <a href="/portal/download/wireguard" class="btn btn-primary">
                ⬇️ Download {{ user['username'] }}-wireguard.conf
            </a>
        </div>
    </div>

    <div class="grid-2" style="align-items: start;">
        <div>
            <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: #fff;">Connection Parameters:</h3>
            <div style="background: rgba(0,0,0,0.3); border-radius: 6px; padding: 1rem; font-size: 0.88rem; display: flex; flex-direction: column; gap: 0.6rem;">
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: var(--text-muted);">Assigned Client IP:</span>
                    <code>{{ user['wg_ip'] }}/24</code>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: var(--text-muted);">Server Endpoint:</span>
                    <code>{{ server_host }}:{{ wg_port }}</code>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: var(--text-muted);">Protocol:</span>
                    <span>UDP (WireGuard)</span>
                </div>
            </div>

            <h3 style="font-size: 1rem; margin-top: 1.25rem; margin-bottom: 0.75rem; color: #fff;">Setup Instructions:</h3>
            <div style="font-size: 0.88rem; color: #cbd5e1; line-height: 1.5;">
                <div style="margin-bottom: 0.75rem;">
                    <strong>📱 Mobile (iOS / Android):</strong>
                    <p style="color: var(--text-muted);">1. Install the free <em>WireGuard</em> app from App Store or Google Play.</p>
                    <p style="color: var(--text-muted);">2. Tap <strong>(+)</strong> &rarr; <strong>Create from QR code</strong>.</p>
                    <p style="color: var(--text-muted);">3. Scan the QR code on the right and connect!</p>
                </div>
                <div>
                    <strong>💻 Desktop (Windows / macOS / Linux):</strong>
                    <p style="color: var(--text-muted);">1. Download the WireGuard client from <a href="https://www.wireguard.com/install/" target="_blank" style="color: #60a5fa;">wireguard.com</a>.</p>
                    <p style="color: var(--text-muted);">2. Click <strong>Download .conf</strong> above.</p>
                    <p style="color: var(--text-muted);">3. Import the file into WireGuard and click <strong>Activate</strong>.</p>
                </div>
            </div>
        </div>

        <div style="text-align: center;">
            <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: #fff;">Scan QR Code (Mobile App):</h3>
            {% if wg_qr_svg %}
                <div class="qr-wrapper" style="max-width: 260px; margin: 0 auto;">
                    {{ wg_qr_svg|safe }}
                </div>
            {% else %}
                <p style="color: var(--text-muted);">QR Code not available.</p>
            {% endif %}
            <p style="color: var(--text-muted); font-size: 0.8rem; margin-top: 0.75rem;">
                Open WireGuard mobile app &rarr; Scan QR code
            </p>
        </div>
    </div>

    <div style="margin-top: 1.5rem;">
        <details>
            <summary style="cursor: pointer; color: #60a5fa; font-size: 0.85rem; font-weight: 600;">
                View Raw WireGuard Configuration Text
            </summary>
            <pre class="code-block" style="margin-top: 0.75rem;">{{ wg_conf_text }}</pre>
        </details>
    </div>
</div>
{% else %}
<div class="card" style="opacity: 0.6; border: 1px dashed var(--card-border);">
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <div style="display: flex; align-items: center; gap: 0.75rem;">
            <span style="font-size: 1.6rem; filter: grayscale(1);">⚡</span>
            <div>
                <h3 style="color: var(--text-muted);">WireGuard Protocol</h3>
                <p style="color: var(--text-muted); font-size: 0.85rem;">Access not granted by administrator for your account.</p>
            </div>
        </div>
        <span class="badge badge-warning">Not Permitted</span>
    </div>
</div>
{% endif %}


<!-- ================= OPENVPN SECTION ================= -->
{% if user['allowed_openvpn'] == 1 %}
<div class="card" style="border-top: 4px solid var(--info); margin-top: 1.5rem;">
    <div class="card-header">
        <div style="display: flex; align-items: center; gap: 0.75rem;">
            <span style="font-size: 1.8rem;">🔑</span>
            <div>
                <h2 class="card-title">OpenVPN Connection</h2>
                <p style="color: var(--text-muted); font-size: 0.85rem;">Industry-standard enterprise SSL/TLS VPN with inline certificates</p>
            </div>
        </div>
        <div>
            <a href="/portal/download/openvpn" class="btn btn-primary" style="background: #0284c7;">
                ⬇️ Download {{ user['username'] }}-openvpn.ovpn
            </a>
        </div>
    </div>

    <div class="grid-2" style="align-items: start;">
        <div>
            <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: #fff;">Connection Parameters:</h3>
            <div style="background: rgba(0,0,0,0.3); border-radius: 6px; padding: 1rem; font-size: 0.88rem; display: flex; flex-direction: column; gap: 0.6rem;">
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: var(--text-muted);">Assigned Client IP:</span>
                    <code>{{ user['ovpn_ip'] }}/24</code>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: var(--text-muted);">Server Endpoint:</span>
                    <code>{{ server_host }}:{{ ovpn_port }}</code>
                </div>
                <div style="display: flex; justify-content: space-between;">
                    <span style="color: var(--text-muted);">Security:</span>
                    <span>AES-256-GCM + TLS-Auth</span>
                </div>
            </div>
        </div>

        <div>
            <h3 style="font-size: 1rem; margin-bottom: 0.75rem; color: #fff;">Setup Instructions:</h3>
            <div style="font-size: 0.88rem; color: #cbd5e1; line-height: 1.5;">
                <div style="margin-bottom: 0.75rem;">
                    <strong>📱 Mobile & Desktop (OpenVPN Connect):</strong>
                    <p style="color: var(--text-muted);">1. Download <strong>OpenVPN Connect</strong> app for Windows, macOS, Android, or iOS.</p>
                    <p style="color: var(--text-muted);">2. Click <strong>Download .ovpn</strong> above to save your profile.</p>
                    <p style="color: var(--text-muted);">3. Import the <code>.ovpn</code> profile into OpenVPN Connect and tap <strong>Connect</strong>.</p>
                </div>
                <div>
                    <strong>🐧 Linux Terminal:</strong>
                    <p style="color: var(--text-muted); font-family: monospace;">sudo openvpn --config {{ user['username'] }}-openvpn.ovpn</p>
                </div>
            </div>
        </div>
    </div>

    <div style="margin-top: 1.5rem;">
        <details>
            <summary style="cursor: pointer; color: #38bdf8; font-size: 0.85rem; font-weight: 600;">
                View Raw OpenVPN Profile Text
            </summary>
            <pre class="code-block" style="margin-top: 0.75rem; max-height: 250px; overflow-y: auto;">{{ ovpn_conf_text }}</pre>
        </details>
    </div>
</div>
{% else %}
<div class="card" style="opacity: 0.6; border: 1px dashed var(--card-border); margin-top: 1.5rem;">
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <div style="display: flex; align-items: center; gap: 0.75rem;">
            <span style="font-size: 1.6rem; filter: grayscale(1);">🔑</span>
            <div>
                <h3 style="color: var(--text-muted);">OpenVPN Protocol</h3>
                <p style="color: var(--text-muted); font-size: 0.85rem;">Access not granted by administrator for your account.</p>
            </div>
        </div>
        <span class="badge badge-warning">Not Permitted</span>
    </div>
</div>
{% endif %}
{% endblock %}