{% extends "auth/layout.html" %}
{% block title %}{{ t('mfa_verify_title') }} | {{ app_name }}{% endblock %}
{% block auth_stage_intro %}
    <p class="auth-stage-copy">{{ t('mfa_verify_subtitle') }}</p>
{% endblock %}
{% block content %}
    <div class="auth-card auth-card-signin auth-card-mfa">
        <div class="auth-inline-alerts toast-stack" data-toast-host aria-live="polite" aria-atomic="true"></div>
        <div class="auth-card-header">
            <div>
                <h2>{{ t('mfa_verify_title') }}</h2>
                <p>{{ ltext('Use the email code to continue securely. / استخدم رمز البريد للمتابعة بشكل آمن.') }}</p>
            </div>
            <div class="auth-trust-badge">{{ ltext('Email OTP / رمز البريد') }}</div>
        </div>
        <div class="auth-card-status">
            <span>{{ pending_user.email }}</span>
            <span>{{ ltext('6-Digit Code / رمز من 6 أرقام') }}</span>
        </div>
        <form method="post" class="form-grid auth-form-grid">
            {{ form.hidden_tag() }}
            <label class="auth-field">
                <span class="auth-field-label">{{ form.code.label.text }}</span>
                {{ form.code(class="input auth-input", inputmode="numeric", autocomplete="one-time-code", placeholder=ltext('Enter the OTP code / أدخل رمز التحقق')) }}
            </label>
            {{ form.submit(class="button auth-submit") }}
        </form>
        <form method="post" action="{{ url_for('auth.resend_mfa_code') }}" class="inline-form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="button button-secondary">{{ ltext('Resend Code / إعادة إرسال الرمز') }}</button>
        </form>
        <p class="muted-link-row"><a href="{{ url_for('auth.login') }}">{{ t('back_to_sign_in') }}</a></p>
    </div>
{% endblock %}