{% extends "base.html" %}
{% block title %}Two-Factor Verification{% endblock %}
{% block page_title %}Two-Factor Verification{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
<div class="col-12 col-sm-8 col-md-5 col-lg-4">
<div class="pcard">
    <div class="text-center mb-4">
        <div style="width:56px;height:56px;border-radius:14px;background:#ede9fe;color:#5b21b6;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 12px;">
            <i class="bi bi-shield-lock-fill"></i>
        </div>
        <h5 style="font-weight:700;">Verify your identity</h5>
        <p class="text-muted" style="font-size:13px;">Enter the 6-digit code from your authenticator app.</p>
    </div>

    {% if error %}
    <div class="alert alert-danger" style="font-size:13px;">{{ error }}</div>
    {% endif %}

    <form method="POST" autocomplete="off">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="mb-3">
            <input type="text" name="code" inputmode="numeric" pattern="[0-9 ]*"
                   maxlength="7" autofocus
                   class="form-control text-center mono"
                   style="font-size:28px;font-weight:700;letter-spacing:.2em;"
                   placeholder="000000">
        </div>
        <button type="submit" class="btn btn-primary w-100">Verify</button>
    </form>

    <div class="text-center mt-3">
        <a href="{{ url_for('auth.login') }}" style="font-size:12px;color:var(--muted);">
            ← Back to login
        </a>
    </div>
</div>
</div>
</div>
{% endblock %}