{{define "content"}}
<div class="wrap">
  <div class="page-head">
    <div>
      <h1>两步验证</h1>
      <div class="sub">为后台登录追加一层动态验证码（TOTP，兼容 Google Authenticator 等 App）</div>
    </div>
    <div class="row"><a class="btn" href="/admin">← 返回后台</a></div>
  </div>

  {{if .Flash}}<div class="alert ok">{{.Flash}}</div>{{end}}
  {{if .Err}}<div class="alert err">{{.Err}}</div>{{end}}

  {{if .Enabled}}
  <div class="card">
    <h2>状态：已开启</h2>
    <div class="card-sub">每次登录后台，除口令外还需输入验证器 App 中的 6 位验证码</div>
    <form method="post" action="/admin/twofa/disable" style="max-width:360px">
      <label class="f"><span>输入当前验证码以关闭</span>
        <input type="text" name="code" inputmode="numeric" maxlength="6" required
               style="text-align:center;letter-spacing:6px;font-size:16px">
      </label>
      <button class="btn danger" type="submit">关闭两步验证</button>
    </form>
  </div>
  {{else if .Pending}}
  <div class="card">
    <h2>绑定验证器</h2>
    <div class="card-sub">用验证器 App 扫描二维码，或手动输入秘钥，然后输入 App 显示的 6 位验证码确认</div>
    <div class="row" style="align-items:flex-start;gap:20px;flex-wrap:wrap">
      {{if .QR}}<img src="data:image/png;base64,{{.QR}}" alt="TOTP 二维码"
           style="width:220px;height:220px;border:1px solid var(--line);border-radius:10px;background:var(--surface)">{{end}}
      <div style="min-width:240px">
        <label class="f"><span>秘钥（手动输入用）</span>
          <input type="text" readonly value="{{.Secret}}" onclick="this.select()"
                 style="font-family:monospace;letter-spacing:1px">
        </label>
        <div class="muted" style="font-size:12.5px">账户名：rond-with-you · 算法 SHA1 · 6 位 · 30 秒</div>
      </div>
    </div>
    <form method="post" action="/admin/twofa/confirm" style="max-width:360px;margin-top:6px">
      <label class="f"><span>输入验证码确认开启</span>
        <input type="text" name="code" inputmode="numeric" maxlength="6" required
               style="text-align:center;letter-spacing:6px;font-size:16px">
      </label>
      <button class="btn primary" type="submit">确认开启</button>
    </form>
  </div>
  {{else}}
  <div class="card">
    <h2>状态：未开启</h2>
    <div class="card-sub">开启后，登录 = 口令 + 动态验证码，即使口令泄露账户也不会被直接攻破</div>
    <form method="post" action="/admin/twofa/setup">
      <button class="btn primary" type="submit">开始绑定验证器</button>
    </form>
    <div class="muted" style="font-size:12.5px;margin-top:10px">
      需要一个 TOTP 验证器 App（Google Authenticator、Microsoft Authenticator、1Password、Aegis 等均可）。
    </div>
  </div>
  {{end}}
</div>
{{end}}