{% extends "base.html" %}
{% block title %}إعداد المصادقة الثنائية{% endblock %}
{% block content %}
<div class="max-w-md mx-auto px-4 py-16">
    <div class="glass p-8 rounded-2xl border border-white/10">
        <div class="text-center mb-8">
            <div class="text-xs text-gold-500 font-mono tracking-widest uppercase mb-2">TWO-FACTOR AUTH</div>
            <h1 class="text-2xl font-bold text-white">إعداد المصادقة الثنائية</h1>
            <p class="text-slate-400 text-sm mt-2">امسح رمز QR باستخدام تطبيق Google Authenticator</p>
        </div>

        <div class="flex justify-center mb-6">
            <div class="bg-white p-3 rounded-xl">
                <img src="data:image/png;base64,{{ qr_b64 }}" alt="QR Code" class="w-48 h-48">
            </div>
        </div>

        <div class="text-center mb-6">
            <p class="text-slate-500 text-xs mb-1">أو أدخل المفتاح يدوياً:</p>
            <code class="text-gold-400 text-sm bg-white/5 px-3 py-1 rounded select-all">{{ secret }}</code>
        </div>

        <form method="POST" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div>
                <label class="text-xs text-slate-400 block mb-1">رمز التحقق (6 أرقام)</label>
                <input name="code" type="text" maxlength="6" pattern="\d{6}" required autocomplete="off"
                       class="w-full bg-white/5 border border-white/10 text-white rounded-lg px-4 py-3 text-center text-2xl tracking-[0.5em] font-mono focus:border-gold-500/50 focus:outline-none">
            </div>
            <button type="submit" class="w-full bg-gold-500 text-black font-bold py-3 rounded-lg hover:bg-gold-400 transition">تفعيل 2FA</button>
        </form>
    </div>
</div>
{% endblock %}