{% extends "base.html" %}
{% block title %}Account — MartinhalApprovalFlow{% endblock %}
{% block content %}
<h1>Account</h1>
<p class="sub">Signed in as <b>{{ user.username }}</b>{% if user.email %} · <span class="mono">{{ user.email }}</span>{% endif %}</p>

<div class="card">
  <h2 style="margin-top:0">Two-factor authentication (MFA)</h2>

  {% if user.mfa_secret %}
    <p><span class="stamp approved">enabled</span></p>
    <p class="muted">Signing in requires your password and a 6-digit code from your authenticator app.</p>
    <form method="post">
      <input type="hidden" name="action" value="disable">
      <label for="dc">Enter a current code to disable MFA</label>
      <input id="dc" type="text" name="code" inputmode="numeric" maxlength="7" required style="max-width:180px">
      <button class="btn deny" type="submit">Disable MFA</button>
    </form>

  {% elif setup_secret %}
    <p class="muted">1 — Scan this QR code with Google Authenticator, Authy, 1Password, or any TOTP app.
       If you can't scan, enter the secret manually.</p>
    <div id="qr" style="background:#fff;padding:12px;width:fit-content;border-radius:8px"></div>
    <p class="mono" style="word-break:break-all">Secret: {{ setup_secret }}</p>
    <p class="muted">2 — Enter the 6-digit code the app shows to confirm.</p>
    <form method="post" class="rowline">
      <input type="hidden" name="action" value="confirm">
      <input type="text" name="code" inputmode="numeric" maxlength="7" placeholder="123456" required style="max-width:160px">
      <button class="small" type="submit">Confirm and enable</button>
    </form>
    <form method="post" style="margin-top:.5rem">
      <input type="hidden" name="action" value="cancel">
      <button class="btn ghost small" type="submit">Cancel setup</button>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script>new QRCode(document.getElementById("qr"), {text: {{ otpauth | tojson }}, width: 180, height: 180});</script>

  {% else %}
    <p><span class="stamp pending">disabled</span></p>
    <p class="muted">Add a second sign-in step: your password plus a 6-digit code from an authenticator app on your phone.</p>
    <form method="post">
      <input type="hidden" name="action" value="begin">
      <button type="submit">Enable MFA</button>
    </form>
  {% endif %}
</div>
{% endblock %}