<!doctype html>
<html lang="en-NZ">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="color-scheme" content="dark">
  <meta name="robots" content="noindex,nofollow,noarchive,nosnippet,noimageindex">
  <meta name="googlebot" content="noindex,nofollow,noarchive,nosnippet,noimageindex">
  <meta name="bingbot" content="noindex,nofollow,noarchive,nosnippet,noimageindex">
  <meta name="referrer" content="no-referrer">
  <title>{{if .Authenticated}}Install Memby{{else}}Sign in{{end}}</title>
  <style>
    :root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
    * { box-sizing: border-box; }
    body {
      min-height: 100vh; margin: 0; padding: 32px 20px; display: grid; place-items: center;
      color: #f2f5f7; background:
        radial-gradient(circle at 50% 5%, rgba(82,181,75,.18), transparent 42%),
        #0b0e11;
    }
    main {
      width: min(680px, 100%); padding: clamp(28px, 6vw, 56px);
      border: 1px solid rgba(255,255,255,.11); border-radius: 22px;
      background: rgba(20,27,33,.94); box-shadow: 0 24px 80px rgba(0,0,0,.42);
    }
    .mark {
      width: 68px; height: 68px; display: grid; place-items: center; margin-bottom: 26px;
      border-radius: 18px; background: #52b54b; color: #08230a;
      font-size: 34px; font-weight: 900;
    }
    .subtle-mark { width: 42px; height: 42px; margin-bottom: 20px; border-radius: 12px; font-size: 21px; }
    .login-title { font-size: 26px; letter-spacing: -.025em; }
    .login-intro { margin-bottom: 22px; font-size: 15px; }
    h1 { margin: 0 0 10px; font-size: clamp(32px, 7vw, 48px); letter-spacing: -.04em; }
    .intro { margin: 0 0 28px; color: #b6c0c8; font-size: 18px; line-height: 1.55; }
    .download {
      display: block; padding: 17px 24px; border-radius: 12px; text-align: center;
      color: #08230a; background: #63c85b; text-decoration: none;
      font-size: 19px; font-weight: 750;
    }
    .download:hover, .download:focus { background: #7bd973; outline: 3px solid #d7ffd4; outline-offset: 4px; }
    form { display: grid; gap: 17px; }
    label { display: grid; gap: 7px; color: #c8d0d6; font-size: 15px; font-weight: 650; }
    input {
      width: 100%; min-height: 54px; padding: 12px 14px; border: 1px solid #52606b;
      border-radius: 10px; color: #f2f5f7; background: #0d1217; font: inherit;
    }
    input:focus { outline: 3px solid #86dc80; outline-offset: 2px; border-color: transparent; }
    button {
      min-height: 54px; padding: 13px 20px; border: 0; border-radius: 10px;
      color: #08230a; background: #63c85b; font: inherit; font-size: 17px; font-weight: 750;
      cursor: pointer;
    }
    button:hover, button:focus { background: #7bd973; outline: 3px solid #d7ffd4; outline-offset: 3px; }
    .error { margin: 0; padding: 12px 14px; border-radius: 9px; color: #ffd4d4; background: #3b2020; }
    .logout { margin-top: 24px; }
    .logout button { min-height: 42px; color: #c9d1d7; background: #26313a; font-size: 14px; }
    .meta { margin: 13px 0 0; color: #8f9ba5; text-align: center; font-size: 14px; }
    ol { margin: 34px 0 0; padding-left: 24px; color: #c8d0d6; line-height: 1.65; }
    li + li { margin-top: 10px; }
    .notes { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: #9faab3; }
    .unavailable { padding: 18px; border-radius: 12px; background: #33251b; color: #ffd7b0; line-height: 1.5; }
    code { color: #d9ffd6; }
  </style>
</head>
<body>
  <main>
    {{if not .Authenticated}}
      <div class="mark subtle-mark">M</div>
      <h1 class="login-title">Sign in</h1>
      <p class="intro login-intro">Login required to continue.</p>
      <form method="post" action="/install/login">
        <input name="next" type="hidden" value="{{.LoginNext}}">
        {{if .Error}}<p class="error" role="alert">{{.Error}}</p>{{end}}
        <label>
          Username
          <input name="username" type="text" autocomplete="username" autocapitalize="none" required autofocus>
        </label>
        <label>
          Password
          <input name="password" type="password" autocomplete="current-password" required>
        </label>
        <button type="submit">Sign in</button>
      </form>
    {{else}}
      <div class="mark">M</div>
      <h1>Install Memby</h1>
      {{if .Ready}}
      <p class="intro">The private Android TV client for this household’s Emby library.</p>
      <a class="download" href="{{.DownloadURL}}">Download Memby {{.Version}}</a>
      <p class="meta">Signed Android APK · {{.Size}}</p>
      <ol>
        <li>Open this page on the TV using a browser or the Downloader app.</li>
        <li>Choose <strong>Download</strong>. If Android asks, allow that app to install unknown apps.</li>
        <li>If Android asks, allow that app to access files - This is required for app updates.</li>
        <li>Open the downloaded APK and choose <strong>Install</strong>, then launch Memby and sign in.</li>
      </ol>
      {{if .Notes}}<p class="notes"><strong>Latest release:</strong> {{.Notes}}</p>{{end}}
      <form class="logout" method="post" action="/install/logout"><button type="submit">Sign out</button></form>
      {{else}}
      <p class="unavailable">The installer is not available yet. Publish a signed Memby release, then refresh this page.</p>
      {{end}}
    {{end}}
  </main>
</body>
</html>
