{% extends 'base.html' %}

{% block title %}Configurar Autenticação em Dois Fatores{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-8 offset-md-2 text-center">
            <div class="card">
                <div class="card-header">
                    <h3>Configure a Autenticação em Dois Fatores</h3>
                </div>
                <div class="card-body">
                    <p class="lead">Siga os passos abaixo para configurar a autenticação em dois fatores:</p>
                    
                    <ol class="text-start mb-4">
                        <li>Instale um aplicativo autenticador no seu celular (Google Authenticator, Microsoft Authenticator, etc)</li>
                        <li>Abra o aplicativo e escaneie o QR Code abaixo</li>
                        <li>O aplicativo irá gerar um código de 6 dígitos a cada 30 segundos</li>
                        <li>Use este código ao fazer login no sistema</li>
                    </ol>

                    <div class="mb-4">
                        <img src="https://chart.googleapis.com/chart?cht=qr&chs=300x300&chl={{ qr_uri|urlencode }}"
                             class="img-fluid" alt="QR Code para OTP">
                    </div>

                    <div class="alert alert-warning">
                        <strong>Importante:</strong> Guarde este QR Code em um lugar seguro. 
                        Você precisará dele caso troque de celular ou reinstale o aplicativo autenticador.
                    </div>

                    <div class="mt-4">
                        <a href="{{ url_for('login') }}" class="btn btn-primary">Ir para Login</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}