{% extends "base.html" %}

{% block title %}{{ _('Two-factor authentication') }}{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl font-bold">{{ _('Two-factor authentication') }}</h1>
        <p class="text-sm text-text-muted-light dark:text-text-muted-dark mt-1">
            {{ _('Add an extra layer of security to your account using a TOTP authenticator app (Google Authenticator, Authy, 1Password, etc.).') }}
        </p>
    </div>

    <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark rounded-xl p-6">
        {% if two_factor_enabled %}
            <div class="p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 mb-6">
                <p class="text-sm text-green-800 dark:text-green-200">
                    <i class="fas fa-check-circle mr-2"></i>{{ _('Two-factor authentication is enabled for your account.') }}
                </p>
            </div>

            <form method="POST" class="space-y-4">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="action" value="disable">

                <label for="code" class="block text-sm font-medium">{{ _('Enter a current code to disable') }}</label>
                <input type="text" name="code" id="code" inputmode="numeric" autocomplete="one-time-code"
                       class="form-input" placeholder="123 456" required>
                <button type="submit" class="btn btn-danger">{{ _('Disable 2FA') }}</button>
            </form>
        {% else %}
            <div class="p-4 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 mb-6">
                <p class="text-sm text-yellow-800 dark:text-yellow-200">
                    <i class="fas fa-exclamation-triangle mr-2"></i>{{ _('Two-factor authentication is currently disabled.') }}
                </p>
            </div>

            {% if not secret %}
                <p class="text-sm text-text-muted-light dark:text-text-muted-dark">
                    {{ _('A secret will be generated when you enable 2FA.') }}
                </p>
            {% else %}
                <div class="mb-6">
                    <h2 class="text-sm font-semibold mb-2">{{ _('1) Add to your authenticator app') }}</h2>
                    <p class="text-xs text-text-muted-light dark:text-text-muted-dark mb-3">
                        {{ _('If you cannot scan a QR code, you can manually enter this secret:') }}
                    </p>
                    <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
                        <div class="font-mono text-sm break-all">{{ secret }}</div>
                        {% if provisioning_uri %}
                        <div class="mt-2 text-xs text-text-muted-light dark:text-text-muted-dark break-all">
                            {{ _('Provisioning URI:') }} <span class="font-mono">{{ provisioning_uri }}</span>
                        </div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}

            <form method="POST" class="space-y-4">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="action" value="enable">

                <h2 class="text-sm font-semibold">{{ _('2) Verify and enable') }}</h2>
                <label for="code" class="block text-sm font-medium">{{ _('Enter the 6-digit code') }}</label>
                <input type="text" name="code" id="code" inputmode="numeric" autocomplete="one-time-code"
                       class="form-input" placeholder="123 456" required>
                <button type="submit" class="btn btn-primary">{{ _('Enable 2FA') }}</button>
            </form>
        {% endif %}
    </div>
</div>
{% endblock %}