<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% if success %}Signed in{% else %}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: 420px;
            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: 12.5px;
            color: var(--text); word-break: break-all;
        }
        .progress {
            width: 100%; height: 6px; background: var(--surface-2);
            border-radius: 999px; overflow: hidden; margin: 20px 0 0;
        }
        .progress > div { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width 1000ms; }
        .btn {
            display: inline-block; text-align: center;
            background: var(--accent); color: var(--accent-fg);
            border: none; border-radius: 7px;
            padding: 10px 16px; margin-top: 20px;
            font-size: 13px; font-weight: 500; text-decoration: none;
            font-family: inherit; cursor: pointer;
        }
        .btn:hover { filter: brightness(1.06); }
        .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;
        }
        .subtle-link { color: var(--accent); text-decoration: none; }
        .subtle-link:hover { text-decoration: underline; }
        small { font-size: 12px; color: var(--soft); }
    </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>Signed in</h1>
        <p>Signing you in to <span class="mono">{{ project_name }}</span>…</p>
        <div class="progress"><div id="progress-bar"></div></div>
        <p><small>You'll be redirected shortly. <a href="{{ redirect_url }}" class="subtle-link">Continue now</a> if nothing happens.</small></p>
        <script>
            const redirectUrl = {{ redirect_url | json_encode() }};
            const progressBar = document.getElementById('progress-bar');
            setTimeout(() => progressBar.style.width = '100%', 100);
            setTimeout(() => { window.location.href = redirectUrl; }, 1000);
        </script>
        {% else %}
        <div class="logo" aria-hidden="true">R</div>
        <div class="badge bad" aria-hidden="true">!</div>
        <h1>Authentication failed</h1>
        <p>Failed to authenticate for <span class="mono">{{ project_name }}</span>.</p>
        {% if error_message %}
        <div class="errbox">{{ error_message }}</div>
        {% endif %}
        <a href="/api/v1/auth/signin?project={{ project_name }}{% if redirect_url %}&redirect={{ redirect_url | urlencode }}{% endif %}" class="btn">Try again</a>
        {% endif %}
    </div>
</body>
</html>
