<%- include('../partials/head') %>
<div class="auth-page">
  <div class="auth-theme"><%- include('../partials/theme-toggle') %></div>
  <div class="auth-card" style="max-width:440px">
    <img src="/img/lockup-color.png" alt="OTENEX" class="logo">
    <div class="auth-tag">Save these now</div>
    <p class="hint">Scan with Google Authenticator, Authy or 1Password. This screen will not be shown again.</p>
    <div style="text-align:center;margin:18px 0">
      <img src="<%= qrDataUrl %>" alt="Two-factor setup code" width="200" height="200">
      <div class="scan-url" style="text-align:center"><%= secret %></div>
    </div>
    <h3 style="font-size:14px;margin:22px 0 8px">Recovery codes</h3>
    <p class="hint" style="margin-bottom:10px">Store these offline. Each one works once, and they are the only way back in if you lose your phone.</p>
    <div class="scan-url" style="line-height:1.9">
      <% recovery.forEach(function(c){ %><%= c %><br><% }); %>
    </div>
    <a class="btn block" href="/app" style="margin-top:20px">I have saved them — continue</a>
  </div>
</div>
</body></html>
