{% extends "base.html" %}

{% block title %}AtlasServer - Settings{% endblock %}
{% block header_title %}Settings{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-8">
        <h1 class="text-4xl font-bold mb-2">System Settings</h1>
        <p class="text-xl text-gray-400">Manage global settings for AtlasServer</p>
    </div>

    <!-- Nueva sección de configuración de usuarios -->
    <div class="rounded-lg glass-effect overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-800">
            <h2 class="text-xl font-semibold">User Settings</h2>
        </div>
        <div class="p-6">
            {% if user_success_message %}
            <div class="mb-6 p-4 rounded-md bg-green-500/10 border border-green-500/30 text-green-400 flex gap-3 items-start">
                <i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                <div>
                    <p>{{ user_success_message }}</p>
                </div>
            </div>
            {% endif %}
            
            <form action="/config/users" method="post">
                <div class="space-y-4">
                    <div class="flex items-center gap-2 mb-4">
                        <input 
                            type="checkbox" 
                            id="allow_registration" 
                            name="allow_registration" 
                            class="h-4 w-4 rounded bg-gray-800 border-gray-700 text-blue-600 focus:ring-blue-500"
                            {% if registration_open %}checked{% endif %}
                        >
                        <div>
                            <label for="allow_registration" class="text-sm font-medium text-gray-300">
                                Allow registration of new users
                            </label>
                            <p class="text-xs text-gray-400">
                                If enabled, anyone will be able to create an account in AtlasServer.
                            </p>
                        </div>
                    </div>
                    
                    <button type="submit" class="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white transition-colors flex items-center gap-2">
                        <i data-lucide="save" class="w-4 h-4"></i>
                        <span>Save Settings</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Sección de configuración de ngrok -->
    <div class="rounded-lg glass-effect overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-800">
            <h2 class="text-xl font-semibold">ngrok Configuration</h2>
        </div>
        <div class="p-6">
            {% if success_message %}
            <div class="mb-6 p-4 rounded-md bg-green-500/10 border border-green-500/30 text-green-400 flex gap-3 items-start">
                <i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                <div>
                    <p>{{ success_message }}</p>
                </div>
            </div>
            {% endif %}
            
            <form action="/config/ngrok" method="post">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-300">ngrok Authentication Token</label>
                        <input 
                            type="password" 
                            class="w-full px-4 py-2 rounded-md bg-gray-800 border border-gray-700 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none" 
                            name="ngrok_token" 
                            value="{{ ngrok_token if ngrok_token else '' }}"
                        >
                        <p class="text-xs text-gray-400 mt-1">Get your token at <a href="https://dashboard.ngrok.com/get-started/your-authtoken" target="_blank" class="text-blue-400 hover:underline">dashboard.ngrok.com</a></p>
                    </div>
                    <button type="submit" class="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white transition-colors flex items-center gap-2">
                        <i data-lucide="save" class="w-4 h-4"></i>
                        <span>Save Token</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="rounded-lg glass-effect overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-800">
            <h2 class="text-xl font-semibold">API Documentation Security</h2>
        </div>
        <div class="p-6">
            {% if swagger_success_message %}
            <div class="mb-6 p-4 rounded-md bg-green-500/10 border border-green-500/30 text-green-400 flex gap-3 items-start">
                <i data-lucide="check-circle" class="w-5 h-5 flex-shrink-0 mt-0.5"></i>
                <div>
                    <p>{{ swagger_success_message }}</p>
                </div>
            </div>
            {% endif %}
            
            <form action="/config/swagger" method="post">
                <div class="space-y-4">
                    <div class="flex items-center gap-2 mb-4">
                        <input 
                            type="checkbox" 
                            id="swagger_enabled" 
                            name="swagger_enabled" 
                            class="h-4 w-4 rounded bg-gray-800 border-gray-700 text-blue-600 focus:ring-blue-500"
                            {% if swagger_enabled %}checked{% endif %}
                        >
                        <div>
                            <label for="swagger_enabled" class="text-sm font-medium text-gray-300">
                                Protect API documentation
                            </label>
                            <p class="text-xs text-gray-400">
                                If enabled, authentication will be required to access AtlasServer API documentation (Swagger UI and ReDoc).
                            </p>
                        </div>
                    </div>
                    
                    <div class="flex items-center gap-2 mb-4">
                        <input 
                            type="checkbox" 
                            id="use_admin_credentials" 
                            name="use_admin_credentials" 
                            class="h-4 w-4 rounded bg-gray-800 border-gray-700 text-blue-600 focus:ring-blue-500"
                            {% if use_admin_credentials %}checked{% endif %}
                        >
                        <div>
                            <label for="use_admin_credentials" class="text-sm font-medium text-gray-300">
                                Use administrator credentials
                            </label>
                            <p class="text-xs text-gray-400">
                                If enabled, AtlasServer administrator credentials will be used. Otherwise, custom credentials will be used.
                            </p>
                        </div>
                    </div>
                    
                    <div id="custom_credentials" {% if use_admin_credentials %}class="opacity-50"{% endif %}>
                        <div class="space-y-2 mb-4">
                            <label for="swagger_username" class="block text-sm font-medium text-gray-300">Username</label>
                            <input 
                                type="text" 
                                class="w-full px-4 py-2 rounded-md bg-gray-800 border border-gray-700 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none" 
                                id="swagger_username" 
                                name="swagger_username" 
                                value="{{ swagger_username }}"
                                {% if use_admin_credentials %}disabled{% endif %}
                            >
                        </div>
                        
                        <div class="space-y-2 mb-4">
                            <label for="swagger_password" class="block text-sm font-medium text-gray-300">Password</label>
                            <input 
                                type="password" 
                                class="w-full px-4 py-2 rounded-md bg-gray-800 border border-gray-700 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none" 
                                id="swagger_password" 
                                name="swagger_password" 
                                placeholder="{% if swagger_password %}••••••••{% endif %}"
                                {% if use_admin_credentials %}disabled{% endif %}
                            >
                            <p class="text-xs text-gray-400">Leave empty to keep the current password</p>
                        </div>
                    </div>
                    
                    <div class="mt-4 p-4 rounded-md bg-blue-500/10 border border-blue-500/30 text-blue-400">
                        <p class="text-sm">
                            API documentation is available at:
                            <a href="/docs" target="_blank" class="underline">Swagger UI</a> | 
                            <a href="/redoc" target="_blank" class="underline">ReDoc</a>
                        </p>
                    </div>
                    
                    <button type="submit" class="px-4 py-2 rounded-md bg-blue-600 hover:bg-blue-700 text-white transition-colors flex items-center gap-2">
                        <i data-lucide="save" class="w-4 h-4"></i>
                        <span>Save settings</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Sección de configuración de red -->
    <div class="rounded-lg glass-effect overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-gray-800">
            <h2 class="text-xl font-semibold">Network Settings</h2>
        </div>
        <div class="p-6">
            <div class="mb-4">
                <h3 class="text-lg font-medium mb-2">Server IP Addresses</h3>
                <div class="bg-gray-800 rounded-md p-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="p-3 border border-gray-700 rounded-md">
                            <p class="text-sm text-gray-400 mb-1">Local IP (LAN):</p>
                            <p class="font-mono text-white">{{ local_ip }}</p>
                        </div>
                        <div class="p-3 border border-gray-700 rounded-md">
                            <p class="text-sm text-gray-400 mb-1">Loopback IP:</p>
                            <p class="font-mono text-white">127.0.0.1</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mb-4">
                <h3 class="text-lg font-medium mb-2">AtlasServer Server Configuration</h3>
                <p class="text-gray-400 mb-4">The AtlasServer panel is running on port <span class="font-mono text-white">{{ server_port }}</span></p>
                
                <div class="flex flex-wrap gap-2">
                    <a href="http://localhost:{{ server_port }}" target="_blank" class="px-3 py-1 rounded-md bg-gray-800 hover:bg-gray-700 text-white transition-colors flex items-center gap-2">
                        <i data-lucide="link" class="w-4 h-4"></i>
                        <span>localhost:{{ server_port }}</span>
                    </a>
                    
                    <a href="http://{{ local_ip }}:{{ server_port }}" target="_blank" class="px-3 py-1 rounded-md bg-gray-800 hover:bg-gray-700 text-white transition-colors flex items-center gap-2">
                        <i data-lucide="network" class="w-4 h-4"></i>
                        <span>{{ local_ip }}:{{ server_port }}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', function() {
        const useAdminCheckbox = document.getElementById('use_admin_credentials');
        const customCredentialsDiv = document.getElementById('custom_credentials');
        const usernameInput = document.getElementById('swagger_username');
        const passwordInput = document.getElementById('swagger_password');
        
        function updateCredentialsState() {
            if (useAdminCheckbox.checked) {
                customCredentialsDiv.classList.add('opacity-50');
                usernameInput.disabled = true;
                passwordInput.disabled = true;
            } else {
                customCredentialsDiv.classList.remove('opacity-50');
                usernameInput.disabled = false;
                passwordInput.disabled = false;
            }
        }
        
        useAdminCheckbox.addEventListener('change', updateCredentialsState);
        
        // Initialize state
        updateCredentialsState();
    });
</script>
{% endblock %}