{% extends "base.html" %}
{% block title %}Login - OpenVPN Manager{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/vazirmatn/Vazirmatn-font-face.css') }}">
<style>
.login-stage {
    --net-line: 148,163,184;
    --net-line-alpha: 0.16;
    --net-glow-alpha: 0.9;
    --login-surface: rgba(30,41,59,0.62);
    --login-surface-strong: rgba(30,41,59,0.88);
    --login-border: rgba(255,255,255,0.08);
    --login-border-strong: rgba(255,255,255,0.14);
    --login-text: #f8fafc;
    --login-text-muted: #94a3b8;
    --login-text-faint: #64748b;
    --login-input-bg: rgba(255,255,255,0.04);
    --login-input-border: rgba(255,255,255,0.10);
    --login-shadow: 0 25px 70px -20px rgba(0,0,0,0.6);
    --login-bg-deep: #060911;
    position: relative;
    flex: 1 0 auto;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    font-family: 'Vazirmatn', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
}
body:has(.login-stage) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
footer {
    position: relative;
    z-index: 20;
}
body.light-theme .login-stage {
    --net-line: 79,70,229;
    --net-line-alpha: 0.09;
    --net-glow-alpha: 0.5;
    --login-surface: rgba(255,255,255,0.86);
    --login-surface-strong: rgba(255,255,255,0.97);
    --login-border: rgba(17,24,39,0.10);
    --login-border-strong: rgba(17,24,39,0.16);
    --login-text: #111827;
    --login-text-muted: #6b7280;
    --login-text-faint: #9ca3af;
    --login-input-bg: rgba(17,24,39,0.035);
    --login-input-border: rgba(17,24,39,0.14);
    --login-shadow: 0 20px 60px -20px rgba(17,24,39,0.22);
    --login-bg-deep: #e9ebef;
}

#loginNetCanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
}
.login-stage::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 62% 55% at 50% 38%, transparent 0%, var(--login-bg-deep) 78%),
        linear-gradient(180deg, transparent 0%, var(--login-bg-deep) 100%);
    opacity: 0.94;
}

.login-corner-controls {
    position: fixed;
    top: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 30;
}
.login-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--login-surface);
    border: 1px solid var(--login-border);
    color: var(--login-text-muted);
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.login-icon-btn:hover { transform: translateY(-2px); border-color: var(--login-border-strong); color: var(--login-text); }

.login-card-wrap {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 28rem;
}

.login-logo-row { display: flex; justify-content: center; margin-bottom: 2rem; }
.login-logo { height: 7.5rem; width: auto; filter: drop-shadow(0 0 34px rgba(139,92,246,0.45)); }

.login-card {
    position: relative;
    background: var(--login-surface);
    border: 1px solid var(--login-border);
    border-radius: 1.5rem;
    padding: 2rem;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: var(--login-shadow);
    overflow: hidden;
}
.login-card::before {
    content: "";
    position: absolute;
    top: -40%; left: -20%;
    width: 70%; height: 70%;
    background: radial-gradient(circle, rgba(139,92,246,0.16), transparent 65%);
    pointer-events: none;
}

.login-title { font-size: 1.35rem; font-weight: 700; text-align: center; margin: 0 0 1.5rem; color: var(--login-text); position: relative; }

.login-reseller-chip {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.65rem 0.85rem; border-radius: 0.85rem;
    background: rgba(96,165,250,0.10); border: 1px solid rgba(96,165,250,0.28);
    margin-bottom: 1.35rem; position: relative;
}
.login-reseller-chip i { font-size: 1rem; color: #60a5fa; flex-shrink: 0; }
.login-reseller-label { font-size: 0.68rem; color: var(--login-text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.login-reseller-name { font-size: 0.88rem; font-weight: 600; color: var(--login-text); }

.login-field { margin-bottom: 1.05rem; position: relative; }
.login-field-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--login-text-muted); margin-bottom: 0.4rem; }
.login-field-wrap { position: relative; }
.login-field-icon {
    position: absolute; inset-inline-start: 0.9rem; top: 50%; transform: translateY(-50%);
    color: var(--login-text-faint); pointer-events: none; transition: color 0.2s ease; font-size: 0.92rem;
}
.login-field-input {
    width: 100%;
    padding: 0.72rem 0.9rem 0.72rem 2.6rem;
    border-radius: 0.85rem;
    border: 1px solid var(--login-input-border);
    background: var(--login-input-bg);
    color: var(--login-text);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
[dir="rtl"] .login-field-input { padding: 0.72rem 2.6rem 0.72rem 0.9rem; }
[dir="rtl"] .login-field-icon { inset-inline-start: auto; inset-inline-end: 0.9rem; }
.login-field-input:focus {
    border-color: rgba(139,92,246,0.55);
    background: var(--login-surface-strong);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
}
.login-field-input:focus ~ .login-field-icon { color: #a78bfa; }

.login-pw-toggle {
    position: absolute; inset-inline-end: 0.7rem; top: 50%; transform: translateY(-50%);
    width: 1.7rem; height: 1.7rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.5rem; color: var(--login-text-faint);
    cursor: pointer; background: transparent; border: none; padding: 0;
}
.login-pw-toggle:hover { color: var(--login-text-muted); }

.login-submit-btn {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.8rem 1rem;
    border-radius: 0.9rem;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 700;
    color: #fff;
    display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    background: linear-gradient(90deg, #9333ea, #2563eb);
    box-shadow: 0 14px 30px -12px rgba(124,58,237,0.55);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.login-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(124,58,237,0.65); filter: brightness(1.05); }
.login-submit-btn:active { transform: translateY(0); }

.login-license-info {
    margin-top: 0.9rem;
    padding: 0.95rem;
    border-radius: 0.85rem;
    background: rgba(96,165,250,0.08);
    border: 1px solid rgba(96,165,250,0.24);
    display: flex; gap: 0.7rem;
}
.login-license-info i.fa-info-circle { font-size: 1.25rem; color: #60a5fa; flex-shrink: 0; margin-top: 0.1rem; }
.login-license-title { font-size: 0.82rem; font-weight: 600; color: var(--login-text); margin: 0 0 0.2rem; }
.login-license-text { font-size: 0.74rem; color: var(--login-text-muted); line-height: 1.5; margin: 0 0 0.6rem; }
.login-license-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.login-license-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.74rem; font-weight: 600;
    padding: 0.4rem 0.7rem; border-radius: 0.6rem;
    text-decoration: none; color: #fff; background: #2563eb;
}
.login-license-link.alt { background: var(--login-input-bg); color: var(--login-text-muted); border: 1px solid var(--login-input-border); }
.login-license-foot { font-size: 0.72rem; color: var(--login-text-faint); margin: 0.7rem 0 0; padding-top: 0.55rem; border-top: 1px solid var(--login-border); }
.login-license-foot b { color: var(--login-text-muted); font-weight: 600; }

@media (max-width: 420px) {
    .login-card { padding: 1.6rem 1.35rem; border-radius: 1.25rem; }
    .login-logo { height: 5.5rem; }
}
</style>

<div class="login-corner-controls">
    <button class="login-icon-btn" id="loginThemeBtn" type="button" title="Toggle light/dark theme" aria-label="Toggle theme">
        <i class="fas fa-moon" id="loginMoonIcon"></i>
        <i class="fas fa-sun" id="loginSunIcon" style="display:none"></i>
    </button>
</div>

<div class="login-stage">
    <canvas id="loginNetCanvas"></canvas>

    <div class="login-card-wrap">
        <div class="login-logo-row">
            <img src="{{ panel_logo_url }}" alt="{{ panel_title }}" class="login-logo">
        </div>

        <div class="login-card">
            <h2 class="login-title">Login</h2>

            {% if dedicated_sub_admin is defined and dedicated_sub_admin %}
                <div class="login-reseller-chip">
                    <i class="fas fa-user-shield"></i>
                    <div>
                        <div class="login-reseller-label">Dedicated reseller panel</div>
                        <div class="login-reseller-name">{{ dedicated_sub_admin.username }}</div>
                    </div>
                </div>
            {% endif %}

            <form action="{{ login_action_url if login_action_url is defined else url_for('login') }}" method="post">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

                <div class="login-field">
                    <label for="username" class="login-field-label">Username</label>
                    <div class="login-field-wrap">
                        <i class="fas fa-user login-field-icon"></i>
                        <input id="username" name="username" required class="login-field-input">
                    </div>
                </div>

                <div class="login-field">
                    <label for="password" class="login-field-label">Password</label>
                    <div class="login-field-wrap">
                        <i class="fas fa-lock login-field-icon"></i>
                        <input type="password" id="password" name="password" required class="login-field-input" style="padding-inline-end:2.6rem">
                        <button type="button" class="login-pw-toggle" id="loginPwToggle" aria-label="Show password">
                            <i class="fas fa-eye" id="loginEyeOpen"></i>
                            <i class="fas fa-eye-slash" id="loginEyeClosed" style="display:none"></i>
                        </button>
                    </div>
                </div>

                <input type="hidden" name="license_key" value="Unlimited">
                {% if false %}
                    <div class="login-field" id="licenseField">
                        <label for="license_key" class="login-field-label">License Key</label>
                        <div class="login-field-wrap">
                            <i class="fas fa-key login-field-icon"></i>
                            <input id="license_key" name="license_key" required class="login-field-input">
                        </div>

                        <div class="login-license-info">
                            <i class="fas fa-info-circle"></i>
                            <div>
                                <p class="login-license-title">License Management</p>
                                <p class="login-license-text">Manage, activate, or check your license via our Telegram bot</p>
                                <div class="login-license-links">
                                    <a href="https://t.me/eylan_licensebot" target="_blank" class="login-license-link">
                                        <i class="fab fa-telegram-plane"></i> @eylan_licensebot
                                    </a>
                                    <a href="https://t.me/eylandooo" target="_blank" class="login-license-link alt">
                                        <i class="fas fa-headset"></i> Support & Purchase
                                    </a>
                                </div>
                                <p class="login-license-foot">No license? Contact <b>@eylandooo</b> for purchase or use the bot above</p>
                            </div>
                        </div>
                    </div>
                {% endif %}

                <button type="submit" class="login-submit-btn">
                    <span>Login</span>
                    <i class="fas fa-arrow-right"></i>
                </button>
            </form>
        </div>
    </div>
</div>

<script>
(function() {
    var body = document.body;
    var btn = document.getElementById('loginThemeBtn');
    var moonIcon = document.getElementById('loginMoonIcon');
    var sunIcon = document.getElementById('loginSunIcon');

    function apply(isLight) {
        if (isLight) {
            body.classList.remove('dark-theme');
            body.classList.add('light-theme');
            moonIcon.style.display = 'none';
            sunIcon.style.display = '';
        } else {
            body.classList.remove('light-theme');
            body.classList.add('dark-theme');
            sunIcon.style.display = 'none';
            moonIcon.style.display = '';
        }
    }

    var saved = localStorage.getItem('theme');
    apply(saved === 'light-theme');

    btn.addEventListener('click', function() {
        var goingLight = !body.classList.contains('light-theme');
        apply(goingLight);
        localStorage.setItem('theme', goingLight ? 'light-theme' : 'dark-theme');
    });

    var pwInput = document.getElementById('password');
    var pwToggle = document.getElementById('loginPwToggle');
    var eyeOpen = document.getElementById('loginEyeOpen');
    var eyeClosed = document.getElementById('loginEyeClosed');
    pwToggle.addEventListener('click', function() {
        var show = pwInput.type === 'password';
        pwInput.type = show ? 'text' : 'password';
        eyeOpen.style.display = show ? 'none' : '';
        eyeClosed.style.display = show ? '' : 'none';
    });
})();
</script>

<script>
(function() {
    var canvas = document.getElementById('loginNetCanvas');
    var ctx = canvas.getContext('2d');
    var stage = document.querySelector('.login-stage');
    var W, H, DPR;
    var nodes = [];
    var pulses = [];
    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var palette = [[192,132,252],[96,165,250],[74,222,128],[251,191,36]];

    function getVars() {
        var cs = getComputedStyle(stage);
        return {
            line: cs.getPropertyValue('--net-line').trim() || '148,163,184',
            lineAlpha: parseFloat(cs.getPropertyValue('--net-line-alpha')) || 0.14,
            glowAlpha: parseFloat(cs.getPropertyValue('--net-glow-alpha')) || 0.7
        };
    }

    function resize() {
        DPR = Math.min(window.devicePixelRatio || 1, 2);
        W = window.innerWidth;
        H = window.innerHeight;
        canvas.width = W * DPR;
        canvas.height = H * DPR;
        canvas.style.width = W + 'px';
        canvas.style.height = H + 'px';
        ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
        seed();
    }

    function seed() {
        var count = Math.max(16, Math.min(40, Math.round((W * H) / 32000)));
        nodes = [];
        for (var i = 0; i < count; i++) {
            nodes.push({
                x: Math.random() * W,
                y: Math.random() * H,
                vx: (Math.random() - 0.5) * 0.18,
                vy: (Math.random() - 0.5) * 0.18,
                r: 1.6 + Math.random() * 1.8,
                c: palette[i % palette.length]
            });
        }
        pulses = [];
    }

    function maybeSpawnPulse() {
        if (pulses.length > 3 || Math.random() > 0.02) return;
        var a = nodes[Math.floor(Math.random() * nodes.length)];
        var best = null, bestD = 9999;
        for (var i = 0; i < nodes.length; i++) {
            var b = nodes[i];
            if (b === a) continue;
            var d = Math.hypot(a.x - b.x, a.y - b.y);
            if (d < 170 && d < bestD) { bestD = d; best = b; }
        }
        if (best) pulses.push({ a: a, b: best, t: 0 });
    }

    function step() {
        var vars = getVars();
        ctx.clearRect(0, 0, W, H);

        for (var i = 0; i < nodes.length; i++) {
            var n = nodes[i];
            if (!reduceMotion) {
                n.x += n.vx; n.y += n.vy;
                if (n.x < -20) n.x = W + 20; if (n.x > W + 20) n.x = -20;
                if (n.y < -20) n.y = H + 20; if (n.y > H + 20) n.y = -20;
            }
        }

        for (var i = 0; i < nodes.length; i++) {
            for (var j = i + 1; j < nodes.length; j++) {
                var a = nodes[i], b = nodes[j];
                var d = Math.hypot(a.x - b.x, a.y - b.y);
                if (d < 150) {
                    var alpha = (1 - d / 150) * vars.lineAlpha;
                    ctx.strokeStyle = 'rgba(' + vars.line + ',' + alpha.toFixed(3) + ')';
                    ctx.lineWidth = 1;
                    ctx.beginPath();
                    ctx.moveTo(a.x, a.y);
                    ctx.lineTo(b.x, b.y);
                    ctx.stroke();
                }
            }
        }

        for (var i = 0; i < nodes.length; i++) {
            var n = nodes[i];
            var g = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, n.r * 5);
            g.addColorStop(0, 'rgba(' + n.c.join(',') + ',' + (vars.glowAlpha * 0.5).toFixed(3) + ')');
            g.addColorStop(1, 'rgba(' + n.c.join(',') + ',0)');
            ctx.fillStyle = g;
            ctx.beginPath();
            ctx.arc(n.x, n.y, n.r * 5, 0, Math.PI * 2);
            ctx.fill();

            ctx.fillStyle = 'rgba(' + n.c.join(',') + ',' + vars.glowAlpha.toFixed(3) + ')';
            ctx.beginPath();
            ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
            ctx.fill();
        }

        if (!reduceMotion) {
            maybeSpawnPulse();
            for (var i = pulses.length - 1; i >= 0; i--) {
                var p = pulses[i];
                p.t += 0.018;
                if (p.t >= 1) { pulses.splice(i, 1); continue; }
                var px = p.a.x + (p.b.x - p.a.x) * p.t;
                var py = p.a.y + (p.b.y - p.a.y) * p.t;
                var fade = Math.sin(p.t * Math.PI);
                ctx.fillStyle = 'rgba(' + p.a.c.join(',') + ',' + (fade * 0.95).toFixed(3) + ')';
                ctx.beginPath();
                ctx.arc(px, py, 2.1, 0, Math.PI * 2);
                ctx.fill();
            }
            requestAnimationFrame(step);
        }
    }

    window.addEventListener('resize', resize);
    resize();
    step();
})();
</script>
{% endblock %}