{% extends "admin/base.html" %}

{% block title %}Edit Server: {{ server.name }}{% endblock %}

{% block header_title %}Edit Server{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto">
    <a href="{{ url_for('admin_servers') }}" class="text-[var(--color-primary-500)] hover:text-[var(--color-primary-700)] mb-8 block">&larr; Back to Server Management</a>

    <div class="card-style">
        <h2 class="card-header text-2xl font-bold mb-6 pb-2">Editing: <span class="text-[var(--color-primary-500)]">{{ server.name }}</span></h2>
        
        <form action="{{ url_for('admin_edit_server_post', server_id=server.id) }}" method="post" class="space-y-6">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            
            <div>
                <label for="name" class="block text-sm font-medium">Server Name</label>
                <input type="text" name="name" id="name" required value="{{ server.name }}" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm">
            </div>
            
            <div>
                <label for="url" class="block text-sm font-medium">Server URL</label>
                <input type="url" name="url" id="url" required value="{{ server.url }}" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm">
            </div>

            <div>
                <label class="flex items-center space-x-2 cursor-pointer">
                    <input type="checkbox" name="is_active" value="true" class="h-4 w-4 rounded text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]" {% if server.is_active %}checked{% endif %}>
                    <span class="text-sm font-medium">Server is Active</span>
                </label>
                <p class="mt-1 text-xs text-gray-400">If unchecked, the proxy will temporarily ignore this server.</p>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label for="server_type" class="block text-sm font-medium text-current">Server Type</label>
                    <select name="server_type" id="server_type" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm">
                        <option value="ollama" {% if server.server_type == 'ollama' %}selected{% endif %}>Ollama</option>
                        <option value="vllm" {% if server.server_type == 'vllm' %}selected{% endif %}>vLLM (OpenAI-Compatible)</option>
                        <option value="cloud" {% if server.server_type == 'cloud' %}selected{% endif %}>Ollama Cloud</option>
                        <option value="novita" {% if server.server_type == 'novita' %}selected{% endif %}>Novita AI (Cloud)</option>
                    </select>
                </div>
                <div>
                    <label for="max_parallel" class="block text-sm font-medium">Max Parallel Queries</label>
                    <input type="number" name="max_parallel_queries" id="max_parallel" value="{{ server.max_parallel_queries }}" min="1" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm">
                </div>
            </div>
            <div class="hidden">
                    <option value="ollama" {% if server.server_type == 'ollama' %}selected{% endif %}>Ollama</option>
                    <option value="vllm" {% if server.server_type == 'vllm' %}selected{% endif %}>vLLM (OpenAI-Compatible)</option>
                    <option value="cloud" {% if server.server_type == 'cloud' %}selected{% endif %}>Ollama Cloud</option>
                </select>
            </div>
            
            <div>
                <label for="api_key" class="block text-sm font-medium">API Key</label>
                <input type="password" name="api_key" id="api_key" autocomplete="new-password" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm" placeholder="Leave blank to keep current key">
                <div class="mt-2">
                    <label class="flex items-center">
                        <input type="checkbox" name="remove_api_key" value="true" class="h-4 w-4 rounded text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]">
                        <span class="ml-2 text-sm text-gray-400">Remove existing API Key</span>
                    </label>
                </div>
            </div>

            <div class="pt-4 border-t border-white/10">
                <h3 class="text-lg font-bold mb-2">Model Whitelist</h3>
                <p class="text-xs text-gray-400 mb-4">Select which models this server is allowed to serve. If none are selected, <b>all</b> discovered models will be served by default.</p>
                
                <div class="bg-black/20 p-4 rounded-lg border border-white/5 max-h-64 overflow-y-auto">
                    {% if server.available_models %}
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                            {% for model in server.available_models %}
                            <label class="flex items-center space-x-3 p-2 rounded hover:bg-white/5 cursor-pointer transition-colors">
                                <input type="checkbox" name="allowed_models" value="{{ model.name }}" 
                                       class="h-4 w-4 rounded text-[var(--color-primary-600)]"
                                       {% if server.allowed_models and model.name in server.allowed_models %}checked{% endif %}>
                                <span class="text-sm font-mono truncate">{{ model.name }}</span>
                            </label>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-4 italic text-gray-500">
                            No models discovered yet. Perform a "Refresh" from the server list to populate this whitelist.
                        </div>
                    {% endif %}
                </div>
            </div>
            
            <div class="flex justify-end pt-4">
                <button type="submit" class="w-full md:w-auto justify-center py-2 px-6 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[var(--color-primary-600)] hover:bg-[var(--color-primary-700)]">
                    Save Changes
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}