{% load i18n %}

<div class="space-y-6">
    <div class="mb-6">
        <h3 class="text-lg font-semibold mb-2">{% translate "Scan QR Code" %}</h3>
        <p class="text-gray-600 mb-4">
            {% translate "Scan this QR code with your authenticator app (Google Authenticator, Authy, etc.)" %}
        </p>
        <div class="mb-4 flex justify-center">
            <img src="data:image/svg+xml;base64,{{ qr_code }}" alt="QR Code" class="border p-4">
        </div>
        <p class="text-sm text-gray-500">
            {% translate "Can't scan the code? Use this secret key instead:" %}
            <code class="bg-gray-100 px-2 py-1 rounded">{{ secret_key }}</code>
        </p>
    </div>

    <div class="mb-6">
        <h3 class="text-lg font-semibold mb-2">{% translate "Backup Codes" %}</h3>
        <p class="text-gray-600 mb-4">
            {% translate "Save these backup codes in a secure place. You can use them to access your account if you lose your authentication device." %}
        </p>
        <div class="grid grid-cols-2 gap-2 mb-4">
            {% for code in backup_codes %}
            <code class="bg-gray-100 px-2 py-1 rounded text-center">{{ code }}</code>
            {% endfor %}
        </div>
        <button onclick="window.print()" class="text-blue-500 hover:text-blue-600 text-sm">
            {% translate "Print backup codes" %}
        </button>
    </div>

    <div class="mb-6">
        <h3 class="text-lg font-semibold mb-2">{% translate "Verify Setup" %}</h3>
        <p class="text-gray-600 mb-4">
            {% translate "Enter the verification code from your authenticator app to complete the setup:" %}
        </p>
        <form hx-post="{% url 'accounts:confirm-2fa' %}" 
              hx-target="#setup2FA"
              class="space-y-4">
            {% csrf_token %}
            <div>
                <input type="text" name="token" 
                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
                       placeholder="{% translate 'Enter 6-digit code' %}" 
                       maxlength="6" 
                       pattern="\d{6}" 
                       required>
            </div>
            <button type="submit" 
                    class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">
                {% translate "Verify and Enable" %}
            </button>
        </form>
    </div>
</div>