{% extends 'base.html' %}

{% block title %}Настройка на Двуфакторна Автентификация - Официален Портал{% endblock %}

{% block content %}
<div class="form-container">
    <h2>Настройка на Двуфакторна Автентификация</h2>
    
    {% if mfa_enabled %}
    <div class="gov-alert gov-alert-info">
        <div class="alert-icon">ℹ</div>
        <div class="alert-content">
            <p>Двуфакторната автентификация вече е активирана за вашия акаунт.</p>
            <a href="{% url 'accounts:mfa_disable' %}" class="btn btn-danger" style="margin-top: 1rem;">Деактивиране</a>
        </div>
    </div>
    {% else %}
    <div class="mfa-setup-steps">
        <div class="step">
            <h3>Стъпка 1: Инсталиране на Приложение за Автентификация</h3>
            <p>Ако все още нямате такова, инсталирайте приложение за автентификация на вашето мобилно устройство:</p>
            <ul>
                <li><strong>Google Authenticator</strong> (iOS, Android)</li>
                <li><strong>Microsoft Authenticator</strong> (iOS, Android)</li>
                <li><strong>Authy</strong> (iOS, Android)</li>
                <li><strong>1Password</strong> (iOS, Android, Desktop)</li>
            </ul>
        </div>
        
        <div class="step">
            <h3>Стъпка 2: Сканиране на QR Код</h3>
            <p>Отворете вашето приложение за автентификация и сканирайте този QR код:</p>
            {% if qr_code %}
            <div class="qr-code-container">
                <img src="{{ qr_code }}" alt="QR Code" class="qr-code">
            </div>
            <div class="secret-key">
                <p><strong>Или въведете този ключ ръчно:</strong></p>
                <div class="secret-code">{{ secret_key }}</div>
                <button type="button" class="btn btn-sm btn-secondary" onclick="copySecretKey('{{ secret_key }}')" style="margin-top: 1rem;" data-tooltip="Копиране на секретния ключ">
                    Копиране на Ключ
                </button>
            </div>
            {% else %}
            <p>Генериране на QR код...</p>
            {% endif %}
        </div>
        
        <div class="step">
            <h3>Стъпка 3: Потвърждаване на Настройката</h3>
            <p>Въведете 6-цифрения код от вашето приложение за автентификация, за да потвърдите настройката:</p>
            <div style="text-align: center; margin-top: 1.5rem;">
                <a href="{% url 'accounts:mfa_enable' %}" class="btn btn-primary" data-tooltip="Продължете към страницата за потвърждаване">Продължи към Потвърждаване</a>
            </div>
        </div>
    </div>
    {% endif %}
    
    <div class="form-actions">
        <a href="{% url 'accounts:profile' %}" class="btn btn-secondary">Обратно към Профил</a>
    </div>
</div>

<script>
function copySecretKey(key) {
    navigator.clipboard.writeText(key).then(function() {
        if (typeof Toast !== 'undefined') {
            Toast.success('Секретният ключ е копиран в клипборда!');
        } else {
            alert('Секретният ключ е копиран в клипборда!');
        }
    }, function(err) {
        console.error('Failed to copy: ', err);
        if (typeof Toast !== 'undefined') {
            Toast.error('Неуспешно копиране. Моля, копирайте ръчно.');
        }
    });
}
</script>
{% endblock %}