{% extends "base.html" %}
{% load static %}
{% block title %}
    Management Commands
{% endblock title %}
{% block extra_head %}
    {# Removed custom CSS styles in favor of Tailwind classes #}
{% endblock extra_head %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="container mx-auto px-4 py-8">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h1 class="text-2xl font-bold mb-6">Management Commands</h1>
            {% if not request.user.is_superuser %}
                <div class="mb-6 p-4 rounded-lg bg-yellow-100 text-yellow-700">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Note: Only superusers can run management commands. You can view the command history but cannot execute commands.
                </div>
            {% endif %}
            {% if messages %}
                {% for message in messages %}
                    <div class="mb-4 p-4 rounded-lg {% if message.tags == 'success' %}bg-green-100 text-green-700{% elif message.tags == 'error' %}bg-red-100 text-red-700{% endif %}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead>
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <a href="?sort={% if sort == 'name' and not reverse %}-name{% else %}name{% endif %}"
                                   class="flex items-center hover:text-[#e74c3c]">
                                    Command
                                    {% if sort == 'name' %}
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4 ml-1"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                        </svg>
                                    {% elif sort == '-name' %}
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4 ml-1"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                        </svg>
                                    {% endif %}
                                </a>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <a href="?sort={% if sort == 'last_run' and not reverse %}-last_run{% else %}last_run{% endif %}"
                                   class="flex items-center hover:text-[#e74c3c]">
                                    Last Run
                                    {% if sort == 'last_run' %}
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4 ml-1"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                        </svg>
                                    {% elif sort == '-last_run' %}
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4 ml-1"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                        </svg>
                                    {% endif %}
                                </a>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <a href="?sort={% if sort == 'status' and not reverse %}-status{% else %}status{% endif %}"
                                   class="flex items-center hover:text-[#e74c3c]">
                                    Status
                                    {% if sort == 'status' %}
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4 ml-1"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                        </svg>
                                    {% elif sort == '-status' %}
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4 ml-1"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                        </svg>
                                    {% endif %}
                                </a>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <a href="?sort={% if sort == 'run_count' and not reverse %}-run_count{% else %}run_count{% endif %}"
                                   class="flex items-center hover:text-[#e74c3c]">
                                    Run Count
                                    {% if sort == 'run_count' %}
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4 ml-1"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                        </svg>
                                    {% elif sort == '-run_count' %}
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4 ml-1"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                        </svg>
                                    {% endif %}
                                </a>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <a href="?sort={% if sort == 'activity' and not reverse %}-activity{% else %}activity{% endif %}"
                                   class="flex items-center hover:text-[#e74c3c]">
                                    30 Day Activity
                                    {% if sort == 'activity' %}
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4 ml-1"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                                        </svg>
                                    {% elif sort == '-activity' %}
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="h-4 w-4 ml-1"
                                             fill="none"
                                             viewBox="0 0 24 24"
                                             stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                        </svg>
                                    {% endif %}
                                </a>
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for command in commands %}
                            <tr class="hover:bg-gray-50 cursor-pointer"
                                data-command="{{ command.name }}">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                    <div class="flex items-center">
                                        <span>{{ command.name }}</span>
                                        {% if command.arguments %}
                                            <button class="ml-2 text-gray-400 hover:text-gray-600 focus:outline-none"
                                                    title="Show arguments">
                                                <svg xmlns="http://www.w3.org/2000/svg"
                                                     class="h-4 w-4"
                                                     fill="none"
                                                     viewBox="0 0 24 24"
                                                     stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                                </svg>
                                            </button>
                                        {% endif %}
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500">{{ command.help_text }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {% if command.last_run %}
                                        {{ command.last_run|timesince }} ago
                                    {% else %}
                                        Never
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    {% if command.last_run %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if command.last_success %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
                                            {% if command.last_success %}
                                                Success
                                            {% else %}
                                                Failed
                                            {% endif %}
                                        </span>
                                    {% else %}
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                            Not Run
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ command.run_count|default:"0" }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    {% if command.stats_data %}
                                        <div class="relative">
                                            <!-- Grid background -->
                                            <div class="absolute inset-0 grid grid-rows-4 w-[120px] h-[30px] pointer-events-none">
                                                <div class="border-t border-gray-200"></div>
                                                <div class="border-t border-gray-200"></div>
                                                <div class="border-t border-gray-200"></div>
                                                <div class="border-t border-gray-200"></div>
                                            </div>
                                            <!-- Bars -->
                                            <div class="flex items-end h-[30px] w-[120px] gap-[1px] relative"
                                                 title="30-day activity">
                                                {% for data in command.stats_data %}
                                                    <div class="flex-1 {% if data.value > 0 %}bg-[#e74c3c] hover:bg-red-700{% else %}bg-gray-200 hover:bg-gray-300{% endif %} min-w-[2px] rounded-t-sm transition-all duration-200"
                                                         style="height: {% if data.value > 0 %}{{ data.height_percent|floatformat:0 }}{% else %}1{% endif %}%"
                                                         title="{{ data.date }}: {{ data.value }}"></div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                        <div class="text-xs text-gray-500 mt-1">Max: {{ command.max_value }}</div>
                                    {% else %}
                                        <div class="flex items-center justify-center h-[30px] w-[120px] text-gray-400 text-[10px]">No data</div>
                                    {% endif %}
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    <div class="flex items-center space-x-2">
                                        {% if request.user.is_superuser %}
                                            {% if command.arguments %}
                                                <button type="button"
                                                        onclick="openCommandModal('{{ command.name }}')"
                                                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-[#e74c3c] hover:bg-[#c0392b] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#e74c3c]"
                                                        title="Run command with arguments">
                                                    <svg class="h-4 w-4 mr-1"
                                                         fill="none"
                                                         viewBox="0 0 24 24"
                                                         stroke="currentColor">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                                    </svg>
                                                    Run with Args
                                                </button>
                                            {% else %}
                                                <form method="post"
                                                      action="{% url 'run_management_command' %}"
                                                      class="inline">
                                                    {% csrf_token %}
                                                    <input type="hidden" name="command" value="{{ command.name }}">
                                                    <button type="submit"
                                                            class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-[#e74c3c] hover:bg-[#c0392b] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#e74c3c]"
                                                            title="Run command">
                                                        <svg class="h-4 w-4 mr-1"
                                                             fill="none"
                                                             viewBox="0 0 24 24"
                                                             stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                                        </svg>
                                                        Run
                                                    </button>
                                                </form>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-gray-400 italic">Superuser only</span>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% if command.arguments %}
                                <tr class="hidden bg-gray-50" id="args-{{ command.name }}">
                                    <td colspan="7" class="px-6 py-4">
                                        <div class="bg-gray-50 p-4 rounded-lg">
                                            <h3 class="text-sm font-medium text-gray-700 mb-2">Command Arguments</h3>
                                            <table class="min-w-full divide-y divide-gray-200">
                                                <thead>
                                                    <tr>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Argument</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Flags</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Required</th>
                                                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for arg in command.arguments %}
                                                        <tr>
                                                            <td class="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">{{ arg.name }}</td>
                                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">{{ arg.flags }}</td>
                                                            <td class="px-4 py-2 text-sm text-gray-500">{{ arg.help }}</td>
                                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">{{ arg.type }}</td>
                                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
                                                                {% if arg.required %}
                                                                    <span class="text-red-500">Yes</span>
                                                                {% else %}
                                                                    No
                                                                {% endif %}
                                                            </td>
                                                            <td class="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
                                                                {% if arg.default %}
                                                                    {{ arg.default }}
                                                                {% else %}
                                                                    <span class="text-gray-400">None</span>
                                                                {% endif %}
                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </td>
                                </tr>
                            {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Command Modal -->
    <div id="commandModal"
         class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50">
        <div class="fixed inset-0 flex items-center justify-center p-4">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-auto">
                <!-- Modal Header -->
                <div class="flex items-center justify-between p-4 border-b">
                    <h3 class="text-xl font-bold text-gray-900" id="modalCommandName">Run Command</h3>
                    <button type="button"
                            onclick="closeCommandModal()"
                            class="text-gray-400 hover:text-gray-500 focus:outline-none">
                        <svg class="w-6 h-6" 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" />
                        </svg>
                    </button>
                </div>
                <!-- Modal Body -->
                <div class="p-6">
                    <form id="runCommandForm"
                          method="post"
                          action="{% url 'run_management_command' %}">
                        {% csrf_token %}
                        <input type="hidden" id="commandName" name="command" value="">
                        <div id="commandArguments" class="space-y-4">
                            <!-- Arguments will be dynamically added here -->
                        </div>
                        <div class="mt-6 flex justify-end space-x-3">
                            <button type="button"
                                    onclick="closeCommandModal()"
                                    class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#e74c3c]">
                                Cancel
                            </button>
                            <button type="submit"
                                    id="runCommandBtn"
                                    class="px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-[#e74c3c] hover:bg-[#c0392b] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#e74c3c]">
                                Run Command
                            </button>
                        </div>
                    </form>
                    <!-- Command Results Section (initially hidden) -->
                    <div id="commandResults" class="mt-6 hidden">
                        <h4 class="text-lg font-medium text-gray-900 mb-2">Command Results</h4>
                        <div id="commandOutput"
                             class="bg-gray-100 p-4 rounded-md text-sm font-mono text-gray-800 max-h-60 overflow-y-auto">
                            <!-- Command output will be displayed here -->
                        </div>
                    </div>
                    <!-- Loading Indicator (initially hidden) -->
                    <div id="commandLoading" class="mt-6 hidden">
                        <div class="flex items-center justify-center space-x-3">
                            <div class="animate-spin rounded-full h-6 w-6 border-4 border-[#e74c3c] border-t-transparent"></div>
                            <span class="text-gray-700">Running command...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM loaded, setting up event listeners');
            const commandRows = document.querySelectorAll('tr[data-command]');
            
            commandRows.forEach(row => {
                row.addEventListener('click', function(e) {
                    // Don't toggle if clicking on a button
                    if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
                        return;
                    }
                    
                    const commandName = this.getAttribute('data-command');
                    const argsRow = document.getElementById(`args-${commandName}`);
                    
                    if (argsRow) {
                        argsRow.classList.toggle('hidden');
                    }
                });
            });
            
            // Set up form submission handling
            const runCommandForm = document.getElementById('runCommandForm');
            if (runCommandForm) {
                console.log('Found command form, setting up submit handler');
                runCommandForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    submitCommandForm(this);
                });
            }

            // Enhanced tooltips for activity bars
            const activityBars = document.querySelectorAll('.flex-1[title]');
            activityBars.forEach(bar => {
                bar.addEventListener('mouseenter', function() {
                    const title = this.getAttribute('title');
                    if (!title) return;
                    
                    // Parse the title to get date and value
                    const [date, valueStr] = title.split(': ');
                    const value = parseInt(valueStr) || 0;
                    
                    // Format the date
                    const formattedDate = new Date(date).toLocaleDateString('en-US', {
                        month: 'short',
                        day: 'numeric',
                        year: 'numeric'
                    });
                    
                    // Create tooltip
                    const tooltip = document.createElement('div');
                    tooltip.className = 'absolute z-10 bg-gray-900 text-white text-xs rounded py-1 px-2 pointer-events-none';
                    tooltip.innerHTML = `
                        <div class="font-bold">${formattedDate}</div>
                        <div class="flex justify-between gap-2">
                            <span>Executions:</span>
                            <span class="font-bold">${value}</span>
                        </div>
                    `;
                    tooltip.style.bottom = '40px';
                    tooltip.style.left = '50%';
                    tooltip.style.transform = 'translateX(-50%)';
                    tooltip.style.whiteSpace = 'nowrap';
                    
                    // Position tooltip
                    this.style.position = 'relative';
                    this.appendChild(tooltip);
                    
                    // Remove title to prevent default tooltip
                    this.setAttribute('data-original-title', title);
                    this.removeAttribute('title');
                });
                
                bar.addEventListener('mouseleave', function() {
                    // Restore title
                    const originalTitle = this.getAttribute('data-original-title');
                    if (originalTitle) {
                        this.setAttribute('title', originalTitle);
                        this.removeAttribute('data-original-title');
                    }
                    
                    // Remove tooltip
                    const tooltip = this.querySelector('div');
                    if (tooltip) {
                        this.removeChild(tooltip);
                    }
                });
            });
        });
        
        // Command modal functions
        function openCommandModal(commandName) {
            console.log('Opening modal for command:', commandName);
            const modal = document.getElementById('commandModal');
            const form = document.getElementById('runCommandForm');
            const argsContainer = document.getElementById('commandArguments');
            const commandNameInput = document.getElementById('commandName');
            const modalTitle = document.getElementById('modalCommandName');
            const resultsSection = document.getElementById('commandResults');
            const loadingSection = document.getElementById('commandLoading');
            
            if (!modal || !form || !argsContainer || !commandNameInput) {
                console.error('Missing required elements:', {
                    modal: !!modal,
                    form: !!form,
                    argsContainer: !!argsContainer,
                    commandNameInput: !!commandNameInput
                });
                return;
            }
            
            // Reset form and hide results/loading
            form.reset();
            if (resultsSection) resultsSection.classList.add('hidden');
            if (loadingSection) loadingSection.classList.add('hidden');
            
            // Set command name
            commandNameInput.value = commandName;
            if (modalTitle) modalTitle.textContent = `Run Command: ${commandName}`;
            
            // Clear previous arguments
            argsContainer.innerHTML = '';
            
            // Get command arguments
            const argsRow = document.getElementById(`args-${commandName}`);
            console.log('Args row found:', !!argsRow);
            
            if (argsRow) {
                const argRows = argsRow.querySelectorAll('tbody tr');
                console.log('Found argument rows:', argRows.length);
                
                argRows.forEach((row, index) => {
                    const cells = row.querySelectorAll('td');
                    if (cells.length < 6) {
                        console.error('Not enough cells in argument row', index);
                        return;
                    }
                    
                    const argName = cells[0].textContent.trim();
                    const argFlags = cells[1].textContent.trim();
                    const argHelp = cells[2].textContent.trim();
                    const argType = cells[3].textContent.trim();
                    const argRequired = cells[4].textContent.trim().includes('Yes');
                    const argDefault = cells[5].textContent.trim();
                    
                    console.log('Processing argument:', argName, argType);
                    
                    // Create form field
                    const fieldDiv = document.createElement('div');
                    
                    // Label
                    const label = document.createElement('label');
                    label.className = 'block text-sm font-medium text-gray-700 mb-1';
                    label.textContent = argName + (argRequired ? ' *' : '');
                    fieldDiv.appendChild(label);
                    
                    // Help text
                    const helpText = document.createElement('p');
                    helpText.className = 'text-xs text-gray-500 mb-1';
                    helpText.textContent = argHelp;
                    fieldDiv.appendChild(helpText);
                    
                    // Input field
                    let input;
                    
                    if (argType.includes('bool')) {
                        // Checkbox for boolean
                        const checkboxDiv = document.createElement('div');
                        checkboxDiv.className = 'flex items-center';
                        
                        input = document.createElement('input');
                        input.type = 'checkbox';
                        input.name = argName;
                        input.id = `arg-${argName}`;
                        input.className = 'h-4 w-4 text-[#e74c3c] focus:ring-[#e74c3c] border-gray-300 rounded';
                        
                        const checkboxLabel = document.createElement('label');
                        checkboxLabel.htmlFor = `arg-${argName}`;
                        checkboxLabel.className = 'ml-2 block text-sm text-gray-900';
                        checkboxLabel.textContent = 'Enable';
                        
                        checkboxDiv.appendChild(input);
                        checkboxDiv.appendChild(checkboxLabel);
                        fieldDiv.appendChild(checkboxDiv);
                    } else {
                        // Text input for other types
                        input = document.createElement('input');
                        input.type = 'text';
                        input.name = argName;
                        input.id = `arg-${argName}`;
                        input.className = 'mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#e74c3c] focus:border-[#e74c3c] sm:text-sm';
                        input.placeholder = argFlags;
                        
                        if (argRequired) {
                            input.required = true;
                        }
                        
                        // Set default value if available
                        if (argDefault !== 'None') {
                            input.value = argDefault;
                        }
                        
                        fieldDiv.appendChild(input);
                    }
                    
                    // Type hint
                    const typeHint = document.createElement('p');
                    typeHint.className = 'mt-1 text-xs text-gray-500';
                    typeHint.textContent = `Type: ${argType}`;
                    fieldDiv.appendChild(typeHint);
                    
                    argsContainer.appendChild(fieldDiv);
                });
            }
            
            // Show modal
            modal.classList.remove('hidden');
            console.log('Modal should now be visible');
        }
        
        function closeCommandModal() {
            console.log('Closing modal');
            const modal = document.getElementById('commandModal');
            if (modal) modal.classList.add('hidden');
        }
        
        function submitCommandForm(form) {
            console.log('Submitting command form');
            const formData = new FormData(form);
            const commandName = formData.get('command');
            const runBtn = document.getElementById('runCommandBtn');
            const resultsSection = document.getElementById('commandResults');
            const outputContainer = document.getElementById('commandOutput');
            const loadingSection = document.getElementById('commandLoading');
            
            // Show loading state
            if (runBtn) {
                runBtn.disabled = true;
                runBtn.innerHTML = '<span class="animate-pulse">Running...</span>';
            }
            if (loadingSection) loadingSection.classList.remove('hidden');
            if (resultsSection) resultsSection.classList.add('hidden');
            
            console.log('Sending AJAX request for command:', commandName);
            
            // Submit form via AJAX
            fetch(form.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                console.log('Received response:', response.status);
                return response.json();
            })
            .then(data => {
                console.log('Command result:', data);
                // Hide loading state
                if (loadingSection) loadingSection.classList.add('hidden');
                if (runBtn) {
                    runBtn.disabled = false;
                    runBtn.innerHTML = 'Run Command';
                }
                
                // Show results
                if (outputContainer) outputContainer.innerHTML = '';
                if (resultsSection) resultsSection.classList.remove('hidden');
                
                if (data.success) {
                    if (outputContainer) {
                        outputContainer.innerHTML = `
                            <div class="text-green-600 mb-2">✅ Command executed successfully</div>
                            <div class="whitespace-pre-wrap">${data.output || 'No output returned'}</div>
                        `;
                    }
                } else {
                    if (outputContainer) {
                        outputContainer.innerHTML = `
                            <div class="text-red-600 mb-2">❌ Command failed</div>
                            <div class="whitespace-pre-wrap">${data.error || 'Unknown error occurred'}</div>
                        `;
                    }
                }
            })
            .catch(error => {
                console.error('Error executing command:', error);
                // Hide loading state
                if (loadingSection) loadingSection.classList.add('hidden');
                if (runBtn) {
                    runBtn.disabled = false;
                    runBtn.innerHTML = 'Run Command';
                }
                
                // Show error
                if (outputContainer) {
                    outputContainer.innerHTML = `
                        <div class="text-red-600 mb-2">❌ Request failed</div>
                        <div>There was a problem communicating with the server. Please try again.</div>
                    `;
                }
                if (resultsSection) resultsSection.classList.remove('hidden');
            });
        }
    </script>
{% endblock content %}