{% extends "base.html" %}
{% block title %}TOTP Setup{% endblock %}
{% block content %}
<h1>Two-Factor Authentication</h1>

<div class="card" style="max-width:480px; margin:0 auto;">
    {% if not pending %}
    <p>Scan this QR code with your authenticator app:</p>
    <div class="totp-qr">
        <img src="{{ qr }}" alt="TOTP QR Code">
    </div>
    <p class="text-dim" style="text-align:center; font-size:.85rem;">Or enter this key manually:</p>
    <div class="totp-secret-box">{{ secret }}</div>
    <hr style="border:none; border-top:1px solid var(--border); margin:1.25rem 0;">
    {% endif %}

    <p>{% if pending %}Enter the current 6-digit code from your app to verify:{% else %}Enter the current 6-digit code to verify setup:{% endif %}</p>
    <form method="POST" style="text-align:center;">
        <input type="text" name="totp_code" pattern="[0-9]{6}" maxlength="6"
               autocomplete="one-time-code" required autofocus
               class="totp-input" placeholder="000000">
        <div class="mt-2">
            <button type="submit" class="btn btn-primary">Verify &amp; Enable</button>
        </div>
    </form>
</div>
{% endblock %}