<!DOCTYPE html>
<html><head>
    <title>Server Manager - Settings</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    {% include "_base_style.html" %}

</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Server Manager</h1>
            <div class="nav">
                <a href="/" class="nav-home">Home</a>
                <span class="nav-sep">|</span>
                <a href="/dashboard" data-nav>Dashboard</a>
                <a href="/servers" data-nav>Servers</a>
                <a href="/settings" class="active" data-nav>Settings</a>
                <a href="/logout" data-nav>Logout</a>
            </div>
        </div>
        
        <div class="card">
            <h2>Integration URLs</h2>
            <div class="form-group">
                <label>Grafana URL</label>
                <input type="text" value="{{ grafana_url }}" readonly>
            </div>
            <div class="form-group">
                <label>Prometheus URL</label>
                <input type="text" value="{{ prometheus_url }}" readonly>
            </div>
        </div>
        
        <div class="card">
            <h2>SSH Keys</h2>
            {% if ssh_keys %}
            <table>
                <thead>
                    <tr><th>Name</th><th>Path</th><th>Fingerprint</th><th>Actions</th></tr>
                </thead>
                <tbody id="sshKeysTable">
                    {% for key in ssh_keys %}
                    <tr data-id="{{ key.id }}">
                        <td>{{ key.name }}</td>
                        <td style="font-family: monospace; font-size: 0.85rem;">{{ key.key_path }}</td>
                        <td style="font-family: monospace; font-size: 0.85rem;">{{ key.fingerprint or '—' }}</td>
                        <td>
                            <button class="btn btn-danger btn-sm" onclick="deleteSSHKey({{ key.id }})">Delete</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p style="color: var(--text-secondary);">No SSH keys configured.</p>
            {% endif %}
            
            <div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color);">
                <h3>Add SSH Key</h3>
                <form id="addSSHKeyForm">
                    <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 15px;">
                        <div class="form-group">
                            <label>Key Name</label>
                            <input type="text" name="name" placeholder="my-ssh-key" required>
                        </div>
                        <div class="form-group">
                            <label>Key Path (inside container)</label>
                            <input type="text" name="key_path" placeholder="/etc/dc-overview/ssh_keys/id_rsa" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Add SSH Key</button>
                </form>
            </div>
        </div>
        
        <div class="card">
            <h2>Exporter Accounts</h2>
            <p style="color: var(--text-secondary); margin-bottom: 15px;">
                Vast.ai and RunPod exporter accounts are managed from the Fleet Management dashboard.
            </p>
            <div style="display: flex; gap: 10px;">
                <a href="/vastai/" class="btn btn-primary">Vast.ai Exporter Settings</a>
                <a href="/runpod/" class="btn btn-primary">RunPod Exporter Settings</a>
            </div>
        </div>
        
        <div class="card">
            <h2>API Endpoints</h2>
            <table>
                <tr><td><code>/api/health</code></td><td>Health check</td></tr>
                <tr><td><code>/api/servers</code></td><td>List/manage servers</td></tr>
                <tr><td><code>/api/ssh-keys</code></td><td>List/manage SSH keys</td></tr>
                <tr><td><code>/api/vast/accounts</code></td><td>Vast.ai accounts (managed via Fleet Management)</td></tr>
                <tr><td><code>/api/runpod/accounts</code></td><td>RunPod accounts (managed via Fleet Management)</td></tr>
                <tr><td><code>/api/prometheus/targets.json</code></td><td>Prometheus file_sd targets</td></tr>
                <tr><td><code>/metrics</code></td><td>Prometheus metrics</td></tr>
            </table>
        </div>
        
        <p class="version">Server Manager v{{ version }}</p>
    </div>
    
    <script>
    // Get base path for API calls - extract /dc from any subpath like /dc/settings
    const basePath = window.location.pathname.match(/^(\/[^\/]+)/)?.[1] || '';
    
    // Fix nav links to include base path (e.g. /dc/servers instead of /servers)
    document.querySelectorAll('.nav a[data-nav]').forEach(a => {
        a.href = basePath + a.getAttribute('href');
    });
    
    // ---- SSH Keys ----
    document.getElementById('addSSHKeyForm').onsubmit = async (e) => {
        e.preventDefault();
        const form = e.target;
        const data = {
            name: form.name.value,
            key_path: form.key_path.value
        };
        
        const response = await fetch(`${basePath}/api/ssh-keys`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });
        
        if (response.ok) {
            location.reload();
        } else {
            const result = await response.json();
            alert(result.error || 'Failed to add SSH key');
        }
    };
    
    async function deleteSSHKey(id) {
        if (!confirm('Delete this SSH key?')) return;
        
        const response = await fetch(`${basePath}/api/ssh-keys/${id}`, {method: 'DELETE'});
        
        if (response.ok) {
            location.reload();
        } else {
            const result = await response.json();
            alert(result.error || 'Failed to delete SSH key');
        }
    }
    
    // Exporter accounts are now managed via Fleet Management (/vastai/ and /runpod/)
    </script>
</body></html>
