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

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

{% block header_title %}Manage Models on <span class="text-[var(--color-primary-500)]">{{ server.name }}</span>{% endblock %}

{% block content %}
<div class="space-y-8">
    <div class="flex justify-between items-center">
        <a href="{{ url_for('admin_servers') }}" class="text-[var(--color-primary-500)] hover:text-[var(--color-primary-700)]">&larr; Back to Server List</a>
    </div>

    {% if server.server_type == 'ollama' %}
    <!-- Live Task Console (Dynamic) -->
    <div id="pull-console-container" class="hidden card-style border-l-4 border-indigo-500 bg-indigo-500/5 mb-8">
        <div class="flex justify-between items-center mb-4">
            <div class="flex items-center gap-3">
                <div class="w-3 h-3 bg-indigo-500 rounded-full animate-ping"></div>
                <h2 class="text-sm font-black uppercase tracking-widest text-indigo-400">Download in Progress</h2>
            </div>
            <button onclick="document.getElementById('pull-console-container').classList.add('hidden')" class="text-gray-500 hover:text-white transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
            </button>
        </div>
        
        <!-- Progress Bar -->
        <div class="mb-4">
            <div class="flex justify-between text-[10px] text-gray-400 uppercase font-black mb-1 px-1">
                <span id="pull-status-text">Starting download...</span>
                <span id="pull-percent">0%</span>
            </div>
            <div class="w-full bg-black/40 rounded-full h-2 border border-white/5 overflow-hidden">
                <div id="pull-progress-bar" class="bg-indigo-500 h-full transition-all duration-300" style="width: 0%"></div>
            </div>
        </div>

        <div id="pull-log-window" class="h-32 overflow-y-auto bg-black/60 rounded-lg p-3 font-mono text-[10px] text-indigo-200 space-y-1 custom-scrollbar">
            <div class="text-gray-600 italic">Connecting to node telemetry...</div>
        </div>
    </div>

    <!-- Pull New Model Form -->
    <div class="card-style">
        <h2 class="card-header text-2xl font-bold mb-4 pb-2">Pull Model</h2>
        <form action="{{ url_for('admin_pull_model', server_id=server.id) }}" method="post">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="md:col-span-2">
                    <label for="model_name" class="block text-sm font-medium text-current">Model Name</label>
                    <input type="text" name="model_name" id="model_name" placeholder="e.g., llama3:latest, mixtral, etc." required class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] sm:text-sm">
                </div>
                <div class="flex items-end">
                    <button type="submit" class="w-full justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[var(--color-primary-600)] hover:bg-[var(--color-primary-700)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--color-primary-500)]">Pull Model</button>
                </div>
            </div>
             <p class="mt-2 text-xs text-gray-400">
                Pulling a model can take several minutes depending on its size and your network speed. The page will reload when the process is complete.
            </p>
        </form>
    </div>
    {% else %}
    <div class="card-style">
        <h2 class="card-header text-2xl font-bold mb-4 pb-2">Model Management</h2>
        <div class="info-box p-4">
            Model management (pulling, deleting, etc.) is not supported for vLLM servers through this UI. Models for vLLM servers are configured when the vLLM server is launched. You can refresh the model list from the main server management page.
        </div>
    </div>
    {% endif %}


    <!-- Existing Models List -->
    <div class="card-style">
        <h2 class="card-header text-2xl font-bold mb-4 pb-2">Available Models</h2>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead>
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Model Name</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Size</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Modified</th>
                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/10">
                    {% if server.available_models %}
                        {% for model in server.available_models %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-current">{{ model.name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                {% if model.size > 0 %}{{ (model.size / 1024**3) | round(2) }} GB{% else %}N/A{% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">{{ model.modified_at[:19].replace('T', ' ') }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                {% if server.server_type == 'ollama' %}
                                <div class="flex justify-end gap-4">
                                    <form action="{{ url_for('admin_load_model', server_id=server.id) }}" method="post" class="inline">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                        <input type="hidden" name="model_name" value="{{ model.name }}">
                                        <button type="submit" class="text-green-400 hover:text-green-600">Load</button>
                                    </form>
                                     <form action="{{ url_for('admin_unload_model', server_id=server.id) }}" method="post" class="inline">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                        <input type="hidden" name="model_name" value="{{ model.name }}">
                                        <button type="submit" class="text-yellow-400 hover:text-yellow-600">Unload</button>
                                    </form>
                                    <form action="{{ url_for('admin_pull_model', server_id=server.id) }}" method="post" class="inline">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                        <input type="hidden" name="model_name" value="{{ model.name }}">
                                        <button type="submit" class="text-blue-400 hover:text-blue-600">Update</button>
                                    </form>
                                    <form action="{{ url_for('admin_delete_model', server_id=server.id) }}" method="post" onsubmit="return confirm('Are you sure you want to delete the model \'{{ model.name }}\'? This is permanent.');" class="inline">
                                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                        <input type="hidden" name="model_name" value="{{ model.name }}">
                                        <button type="submit" class="text-red-500 hover:text-red-700">Delete</button>
                                    </form>
                                </div>
                                {% else %}
                                    <span class="italic text-gray-500">No actions available</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                    <tr>
                        <td colspan="4" class="px-6 py-10 text-center text-gray-400">
                           No models found on this server. This might be because the server is offline or the initial model scan failed. Try refreshing from the main <a href="{{ url_for('admin_servers') }}" class="font-semibold text-[var(--color-primary-500)] hover:underline">Server Management</a> page.
                        </td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}