<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if success %}CLI authentication successful{% else %}CLI authentication failed{% endif %} - Rise</title>
    <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
    <script>{% include "_auth-theme.js.tera" %}</script>
    <style>
        {% include "_auth-tokens.css.tera" %}
        * { box-sizing: border-box; }
        body {
            margin: 0; min-height: 100vh;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            color: var(--text); background: var(--bg);
            display: flex; align-items: center; justify-content: center;
            padding: 24px; letter-spacing: -0.005em;
            -webkit-font-smoothing: antialiased;
        }
        .card {
            width: 100%; max-width: 440px;
            background: var(--surface);
            border: 1px solid var(--border-faint);
            border-radius: 14px;
            box-shadow: var(--shadow-md);
            padding: 36px 32px; text-align: center;
        }
        .logo {
            width: 48px; height: 48px; margin: 0 auto;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--accent), oklch(0.62 0.18 245));
            display: grid; place-items: center;
            color: #fff; font-weight: 700; font-size: 22px;
        }
        .badge {
            width: 44px; height: 44px; border-radius: 50%;
            display: grid; place-items: center; margin: 18px auto 0;
            font-size: 22px; font-weight: 700;
        }
        .badge.ok { background: var(--ok-bg); color: var(--ok); }
        .badge.bad { background: var(--err-bg); color: var(--err); }
        h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 14px 0 0; }
        p { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 10px 0 0; }
        .mono {
            font-family: 'JetBrains Mono', ui-monospace, monospace;
            background: var(--surface-2); border: 1px solid var(--border-faint);
            border-radius: 5px; padding: 1px 6px; font-size: 12px; color: var(--text);
        }
        .steps {
            text-align: left; background: var(--surface-2);
            border: 1px solid var(--border-faint); border-radius: 8px;
            padding: 12px 14px; margin-top: 18px; font-size: 13px; color: var(--muted);
        }
        .steps p { margin: 0 0 6px; color: var(--text); font-weight: 500; }
        .steps ul { margin: 0; padding-left: 18px; }
        .steps li { margin: 4px 0; }
        .errbox {
            background: var(--err-bg); color: var(--err);
            border: 1px solid color-mix(in oklch, var(--err) 30%, transparent);
            border-radius: 7px; padding: 10px 12px; font-size: 12.5px;
            margin: 14px 0 0; text-align: left;
        }
    </style>
</head>
<body>
    <div class="card">
        {% if success %}
        <div class="logo" aria-hidden="true">R</div>
        <div class="badge ok" aria-hidden="true">&check;</div>
        <h1>CLI authentication successful</h1>
        <p>You're signed in to the Rise CLI. You can close this window and return to your terminal.</p>
        <div class="steps">
            <p>Next steps</p>
            <ul>
                <li>Run <code class="mono">rise project list</code> to see your projects</li>
                <li>Run <code class="mono">rise deploy</code> to deploy an application</li>
            </ul>
        </div>
        {% else %}
        <div class="logo" aria-hidden="true">R</div>
        <div class="badge bad" aria-hidden="true">!</div>
        <h1>CLI authentication failed</h1>
        <p>Failed to authenticate with the Rise CLI.</p>
        {% if error_message %}
        <div class="errbox">{{ error_message }}</div>
        {% endif %}
        <p>Please run <code class="mono">rise login</code> again.</p>
        {% endif %}
    </div>
</body>
</html>
