{{ define "content" }}
<div class="max-w-2xl mx-auto">
    <h1 class="text-3xl font-bold mb-6">Profile</h1>
    <div class="bg-gray-800 p-6 rounded mb-6">
        <p class="mb-4">
            <strong class="text-white">Username:</strong> 
            <span class="text-gray-300">admin</span>
        </p>
        <p class="mb-6">
            <strong class="text-white">MFA Status:</strong> 
            {{ if .MFAEnabled }}
                <span class="text-green-400 font-bold">Enabled</span>
            {{ else }}
                <span class="text-yellow-400 font-bold">Disabled</span>
            {{ end }}
        </p>
    </div>

    <!-- Password Change Form -->
    <div class="bg-gray-800 p-6 rounded mb-6">
        <h2 class="text-xl font-bold mb-4 text-white">Change Password</h2>
        <form method="POST" action="/profile">
            <input type="hidden" name="action" value="change_password">
            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
            <div class="mb-4">
                <label class="block text-gray-300 mb-1">Current Password</label>
                <input type="password" name="current_password" required class="w-full p-2 rounded bg-gray-700 text-white">
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-1">New Password</label>
                <input type="password" name="new_password" required class="w-full p-2 rounded bg-gray-700 text-white">
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-1">Confirm New Password</label>
                <input type="password" name="confirm_new_password" required class="w-full p-2 rounded bg-gray-700 text-white">
            </div>
            {{ if .MFAEnabled }}
            <div class="mb-4">
                <label class="block text-gray-300 mb-1">MFA Code</label>
                <input type="text" name="mfa_code" required class="w-full p-2 rounded bg-gray-700 text-white">
            </div>
            {{ end }}
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Change Password</button>
        </form>
    </div>

    <!-- MFA Toggle Form -->
    <div class="bg-gray-800 p-6 rounded mb-6" id="mfa-toggle">
        <h2 class="text-xl font-bold mb-4 text-white">MFA Management</h2>
        <form method="POST" action="/profile">
            <input type="hidden" name="action" value="toggle_mfa">
            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
            {{ if .MFAEnabled }}
                <button type="submit" name="mfa" value="off" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">Disable MFA</button>
            {{ else if not .MFASetupInProgress }}
                <button type="button" onclick="enableMFA()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">Enable MFA</button>
            {{ end }}
        </form>
    </div>

    <!-- MFA Setup Section -->
    <div class="bg-gray-800 p-6 rounded mb-6" id="mfa-setup" style="display: {{ if .MFASetupInProgress }}block{{ else }}none{{ end }};">
        <h2 class="text-xl font-bold mb-4 text-white">Setup MFA</h2>
        <p class="text-gray-300 mb-4">Scan the QR code with your authenticator app or enter the secret manually.</p>
        <div class="mb-4">
            <strong class="text-white">Secret:</strong> <code class="bg-gray-900 px-2 py-1 rounded" id="mfa-secret">{{ .MFASecret }}</code>
        </div>
        <div class="mb-4">
            <strong class="text-white">OTP URL:</strong> <code class="bg-gray-900 px-2 py-1 rounded" id="mfa-url">{{ .MFAURL }}</code>
        </div>
        <div class="mb-4">
            <img id="mfa-qr" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ .MFAURL }}" alt="QR Code" class="border border-gray-600" style="display: {{ if .MFASetupInProgress }}block{{ else }}none{{ end }};">
        </div>
        <form method="POST" action="/profile">
            <input type="hidden" name="action" value="confirm_mfa">
            <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
            <div class="mb-4">
                <label class="block text-gray-300 mb-1">Enter 6-digit code from your app</label>
                <input type="text" name="mfa_code" required class="w-full p-2 rounded bg-gray-700 text-white">
            </div>
            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded mr-2">Confirm MFA</button>
            <button type="submit" name="action" value="cancel_mfa" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded">Cancel</button>
        </form>
    </div>

    <!-- Terminal Commands -->
    <div class="bg-gray-800 p-6 rounded">
        <h2 class="text-xl font-bold mb-4 text-white">Terminal Commands</h2>
        <p class="text-sm text-gray-300 mb-2">
            <strong>Alternative CLI management:</strong>
        </p>
        <p class="text-sm text-gray-400 mt-2">Use the command-line interface with the executable flags:</p>
        <ul class="text-sm text-gray-400 mt-2 ml-4 space-y-1">
            <li>• <code class="bg-gray-900 px-2 py-1 rounded">./unifi-blocklist-app -pw "NewPassword"</code> - Change password</li>
            <li>• <code class="bg-gray-900 px-2 py-1 rounded">./unifi-blocklist-app -mfa on</code> - Enable MFA</li>
            <li>• <code class="bg-gray-900 px-2 py-1 rounded">./unifi-blocklist-app -mfa off</code> - Disable MFA</li>
        </ul>
    </div>
</div>
<script>
function enableMFA() {
    fetch('/api/mfa-setup', {
        method: 'POST',
        headers: {
            'X-CSRF-Token': '{{ .CSRFToken }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('mfa-secret').textContent = data.secret;
        document.getElementById('mfa-url').textContent = data.url;
        document.getElementById('mfa-qr').src = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + encodeURIComponent(data.url);
        document.getElementById('mfa-qr').style.display = 'block';
        document.getElementById('mfa-setup').style.display = 'block';
        document.getElementById('mfa-toggle').style.display = 'none';
    })
    .catch(error => {
        alert('Error enabling MFA: ' + error);
    });
}
</script>
{{ end }}