<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ambient Manager Sign-In</title>
    <meta
      name="description"
      content="Passkey-secured manager access for the hosted Ambient coordinator."
    >
    <link rel="stylesheet" href="/static/styles.css">
    <script defer src="/static/manager-login.js"></script>
  </head>
  <body>
    <div class="auth-shell">
      <header class="nav">
        <a class="brand" href="/">
          <span class="brand-mark">HC</span>
          <span>Ambient</span>
        </a>
        <nav class="nav-links">
          <a href="/download">Install Beta</a>
          <a href="/">Overview</a>
        </nav>
      </header>

      <main>
        <section class="hero-copy">
          <div class="eyebrow">Hosted manager</div>
          <h1 class="page-title">Passkeys lock down the control plane.</h1>
          <p class="lead">
            The public worker and partner APIs stay online, but the hosted manager surface is a separate human access path.
            Developer and operator accounts enroll passkeys, then receive secure manager sessions.
          </p>
          <div class="status-banner" id="status-banner">Checking passkey capability...</div>
        </section>

        <section class="auth-grid">
          <article class="card" id="bootstrap-card">
            <div class="eyebrow">Bootstrap</div>
            <h3>Register the first developer passkey</h3>
            <p id="bootstrap-note" class="helper"></p>
            <form class="form-grid" id="bootstrap-form">
              <label>
                Username
                <input id="bootstrap-username" type="text" value="developer" autocomplete="username">
              </label>
              <label>
                Display name
                <input id="bootstrap-display-name" type="text" value="Developer">
              </label>
              <label>
                Bootstrap secret
                <input id="bootstrap-secret" type="password" autocomplete="current-password">
              </label>
              <div class="inline-actions">
                <button class="button" type="submit">Create passkey</button>
              </div>
            </form>
          </article>

          <article class="card">
            <div class="eyebrow">Sign in</div>
            <h3>Use your passkey to open the manager</h3>
            <p class="helper">
              Manager access is scoped to the configured relying party. Current target:
              <strong id="manager-rp"></strong>.
            </p>
            <form class="form-grid" id="login-form">
              <label>
                Username
                <input id="login-username" type="text" placeholder="developer" autocomplete="username webauthn">
              </label>
              <div class="inline-actions">
                <button class="button" type="submit">Sign in with passkey</button>
                <a class="ghost-button" href="/">Back to product site</a>
              </div>
            </form>
          </article>

          <article class="card">
            <div class="eyebrow">Recovery</div>
            <h3>Use a recovery code to enroll a new passkey</h3>
            <p class="helper">
              Recovery codes are generated while signed in to the manager. Each code can restore access once.
            </p>
            <form class="form-grid" id="recovery-form">
              <label>
                Username
                <input id="recovery-username" type="text" placeholder="developer" autocomplete="username">
              </label>
              <label>
                Recovery code
                <input id="recovery-code" type="text" placeholder="HC-XXXXXX-XXXXXX" autocomplete="one-time-code">
              </label>
              <div class="inline-actions">
                <button class="button" type="submit">Recover manager access</button>
              </div>
            </form>
          </article>
        </section>
      </main>
    </div>
  </body>
</html>
