{% extends "base.html" %}
{% block title %}My Account{% endblock %}
{% block content %}
<div class="page-head"><div><h1>My Account</h1><p class="muted">{{ user.name }} · {{ user.email }}</p></div></div>
<div class="grid grid-2">
<form method="post" class="card">
  <input type="hidden" name="action" value="password">
  <h2>Change Password</h2>
  <div class="field"><label>Current password</label><input type="password" name="current" autocomplete="current-password" required></div>
  <div class="row">
    <div class="field"><label>New password</label><input type="password" name="new" minlength="8" autocomplete="new-password" required></div>
    <div class="field"><label>Type it again</label><input type="password" name="new2" minlength="8" autocomplete="new-password" required></div>
  </div>
  <button class="btn primary">Change Password</button>
</form>
<div class="card">
  <h2>Two-Step Sign-In</h2>
  {% if user.totp_on %}
    <p><span class="pill on">On</span> You need a code from your authenticator app each time you sign in.</p>
    <form method="post" class="actions"><input type="hidden" name="action" value="stop_2fa">
      <input type="text" name="code" inputmode="numeric" placeholder="Current code" style="max-width:160px" required>
      <button class="btn danger">Turn Off</button></form>
  {% elif qr %}
    <p>1. Open an authenticator app (Google Authenticator, Microsoft Authenticator, 1Password…) and scan this:</p>
    <div style="display:inline-block;border:1px solid var(--line);border-radius:8px;padding:6px">{{ qr }}</div>
    <p class="small muted">Can't scan? Enter this key: <code>{{ setup_secret }}</code></p>
    <p>2. Enter the 6-digit code the app shows:</p>
    <form method="post" class="actions"><input type="hidden" name="action" value="confirm_2fa">
      <input type="text" name="code" inputmode="numeric" maxlength="7" style="max-width:160px" required autofocus>
      <button class="btn primary">Turn On</button></form>
  {% else %}
    <p class="muted">Adds a code from your phone when you sign in, so a stolen password isn't enough. Recommended, especially when {{ product.name }} is online.</p>
    <form method="post"><input type="hidden" name="action" value="start_2fa"><button class="btn primary">Set Up Two-Step Sign-In</button></form>
  {% endif %}
</div>
</div>
{% endblock %}