{% extends "base.html" %}
{% block title %}Settings - Hermetic Suite{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="settings">Settings</h1>
    <p class="subtitle">Configure scanner behavior and profiles</p>
</div>

<div class="card">
    <div class="card-header">
        <h2>Network Configuration</h2>
    </div>
    <div class="card-body">
        <form action="{{ url_for('settings.update_cidr_ranges') }}" method="POST">
            <div class="form-group">
                <label for="cidr_ranges">Internal CIDR Ranges</label>
                <input type="text" id="cidr_ranges" name="cidr_ranges" 
                       value="{{ config.INTERNAL_CIDR_RANGES | join(', ') }}"
                       placeholder="172.30.0.0/24, 10.0.0.0/16">
                <small>Comma-separated list of network ranges to scan during discovery</small>
            </div>
            <button type="submit" class="btn btn-primary">Save Network Settings</button>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>System Information</h2>
    </div>
    <div class="card-body">
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">nmap Path:</span>
                <code>{{ config.NMAP_PATH }}</code>
            </div>
            <div class="info-item">
                <span class="info-label">Default Timeout:</span>
                <span>{{ config.SCAN_TIMEOUT }}s</span>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>Version Information</h2>
    </div>
    <div class="card-body">
        <div class="info-grid">
            <div class="info-item">
                <span class="info-label">Installed Version:</span>
                <code id="installed-version">{{ config.VERSION | default('1.0.0') }}</code>
            </div>
            <div class="info-item">
                <span class="info-label">Latest Version:</span>
                <span id="latest-version-container">
                    <span id="latest-version">Checking...</span>
                </span>
            </div>
        </div>
        <div id="version-status" style="margin-top: 1rem; display: none;">
            <div id="version-uptodate" class="alert alert-success" style="display: none;">
                <strong>✓ Up to date!</strong> You are running the latest version of Hermetic Suite.
            </div>
            <div id="version-update-available" class="alert alert-warning" style="display: none;">
                <strong>⚡ Update available!</strong> 
                Version <span id="new-version-number"></span> was released on <span id="new-version-date"></span>.
                <br>
                <a href="https://hermeticsuite.com/downloads.php" target="_blank" class="btn btn-sm btn-primary" style="margin-top: 0.5rem;">
                    Download Update
                </a>
            </div>
            <div id="version-check-error" class="alert alert-secondary" style="display: none;">
                <strong>⚠ Could not check for updates.</strong> 
                <span id="version-error-message"></span>
                <br>
                <a href="https://hermeticsuite.com/downloads.php" target="_blank">Check manually</a>
            </div>
        </div>
        <div style="margin-top: 0.75rem;">
            <button onclick="checkForUpdates()" class="btn btn-secondary btn-sm" id="check-updates-btn">
                🔄 Check for Updates
            </button>
            <span class="text-muted" style="margin-left: 0.5rem; font-size: 0.85rem;">
                Last checked: <span id="last-check-time">Never</span>
            </span>
        </div>
    </div>
</div>

<script>
function compareVersions(v1, v2) {
    // Compare semantic versions (e.g., "1.0.0" vs "1.1.0")
    const parts1 = v1.split('.').map(Number);
    const parts2 = v2.split('.').map(Number);
    
    for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
        const p1 = parts1[i] || 0;
        const p2 = parts2[i] || 0;
        if (p1 < p2) return -1;
        if (p1 > p2) return 1;
    }
    return 0;
}

function checkForUpdates() {
    const btn = document.getElementById('check-updates-btn');
    const latestSpan = document.getElementById('latest-version');
    const statusDiv = document.getElementById('version-status');
    
    // Disable button and show loading state
    btn.disabled = true;
    btn.innerHTML = '⏳ Checking...';
    latestSpan.textContent = 'Checking...';
    
    // Hide all status messages
    document.getElementById('version-uptodate').style.display = 'none';
    document.getElementById('version-update-available').style.display = 'none';
    document.getElementById('version-check-error').style.display = 'none';
    
    fetch('https://hermeticsuite.com/api/version.php', {
        method: 'GET',
        mode: 'cors',
        cache: 'no-cache'
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Server returned ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        const installedVersion = document.getElementById('installed-version').textContent.trim();
        const latestVersion = data.version;
        const releaseDate = data.release_date;
        
        latestSpan.textContent = latestVersion;
        statusDiv.style.display = 'block';
        
        const comparison = compareVersions(installedVersion, latestVersion);
        
        if (comparison >= 0) {
            // Up to date or ahead (development version)
            document.getElementById('version-uptodate').style.display = 'block';
        } else {
            // Update available
            document.getElementById('new-version-number').textContent = latestVersion;
            document.getElementById('new-version-date').textContent = releaseDate;
            document.getElementById('version-update-available').style.display = 'block';
        }
        
        // Update last check time
        const now = new Date();
        document.getElementById('last-check-time').textContent = now.toLocaleString();
        
        // Store in localStorage for persistence
        localStorage.setItem('hsuite_last_version_check', JSON.stringify({
            timestamp: now.toISOString(),
            latest: latestVersion,
            releaseDate: releaseDate
        }));
    })
    .catch(error => {
        console.error('Version check failed:', error);
        latestSpan.textContent = 'Unknown';
        statusDiv.style.display = 'block';
        document.getElementById('version-error-message').textContent = error.message || 'Network error';
        document.getElementById('version-check-error').style.display = 'block';
    })
    .finally(() => {
        // Re-enable button
        btn.disabled = false;
        btn.innerHTML = '🔄 Check for Updates';
    });
}

// Load last check result on page load
document.addEventListener('DOMContentLoaded', function() {
    const lastCheck = localStorage.getItem('hsuite_last_version_check');
    if (lastCheck) {
        try {
            const data = JSON.parse(lastCheck);
            const checkTime = new Date(data.timestamp);
            document.getElementById('last-check-time').textContent = checkTime.toLocaleString();
            
            // If checked within last 24 hours, show the cached result
            const hoursSinceCheck = (Date.now() - checkTime.getTime()) / (1000 * 60 * 60);
            if (hoursSinceCheck < 24 && data.latest) {
                document.getElementById('latest-version').textContent = data.latest;
                
                const installedVersion = document.getElementById('installed-version').textContent.trim();
                const statusDiv = document.getElementById('version-status');
                statusDiv.style.display = 'block';
                
                if (compareVersions(installedVersion, data.latest) >= 0) {
                    document.getElementById('version-uptodate').style.display = 'block';
                } else {
                    document.getElementById('new-version-number').textContent = data.latest;
                    document.getElementById('new-version-date').textContent = data.releaseDate || 'Unknown';
                    document.getElementById('version-update-available').style.display = 'block';
                }
            }
        } catch (e) {
            console.error('Failed to parse cached version data:', e);
        }
    }
});
</script>

<div class="card">
    <div class="card-header">
        <h2>Scan Queue Configuration</h2>
    </div>
    <div class="card-body">
        <form action="{{ url_for('settings.update_scan_settings') }}" method="POST">
            <div class="form-row">
                <div class="form-group">
                    <label for="max_workers">Max Concurrent Scans</label>
                    <input type="number" id="max_workers" name="max_workers" 
                           value="{{ scan_worker_info.max_workers }}"
                           min="1" max="16" style="width: 100px;">
                    <small>Number of parallel scan threads (1-16). Restart required after changes.</small>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Save Scan Settings</button>
        </form>
        
        {% if scan_worker_info.status %}
        <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border);">
            <h3 style="font-size: 1rem; margin-bottom: 0.75rem;">Current Status</h3>
            <div class="info-grid">
                <div class="info-item">
                    <span class="info-label">Active Workers:</span>
                    <span>{{ scan_worker_info.status.active_workers }} / {{ scan_worker_info.status.max_workers }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Running Scans:</span>
                    <span>{{ scan_worker_info.status.running | length }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Pending:</span>
                    <span>{{ scan_worker_info.status.pending_count }}</span>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h2>System Capabilities</h2>
    </div>
    <div class="card-body">
        <p class="text-muted" style="margin-bottom: 1rem;">
            These capabilities are configured during installation via <code>setup.sh</code>.
            To change them, update <code>/etc/sudoers.d/hsuite</code> and <code>/opt/hsuite/.env</code>.
        </p>
        <table class="table">
            <thead>
                <tr>
                    <th>Capability</th>
                    <th>Status</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>Sudo nmap</strong></td>
                    <td>
                        {% if system_capabilities.nmap_sudo %}
                        <span class="badge badge-success">Enabled</span>
                        {% else %}
                        <span class="badge badge-secondary">Disabled</span>
                        {% endif %}
                    </td>
                    <td>Run nmap with elevated privileges for TTL-based host type detection (load balancers, network devices)</td>
                </tr>
                <tr>
                    <td><strong>Self-restart</strong></td>
                    <td>
                        {% if system_capabilities.self_restart %}
                        <span class="badge badge-success">Enabled</span>
                        {% else %}
                        <span class="badge badge-secondary">Disabled</span>
                        {% endif %}
                    </td>
                    <td>Allow Hermetic Suite to restart itself after plugin updates (via systemctl)</td>
                </tr>
            </tbody>
        </table>
        
        {% if system_capabilities.self_restart %}
        <div style="margin-top: 1rem; display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 4px;">
            <form action="{{ url_for('settings.restart_service') }}" method="POST" style="display: inline;">
                <button type="submit" class="btn btn-warning" 
                    onclick="return confirm('Restart Hermetic Suite service? This will briefly interrupt access while the service restarts.')">
                    🔄 Restart Service
                </button>
            </form>
            <span>
                Restart Hermetic Suite to apply configuration or plugin changes.
            </span>
        </div>
        {% endif %}
        
        {% if not system_capabilities.nmap_sudo or not system_capabilities.self_restart %}
        <div style="margin-top: 1rem; padding: 0.75rem; background: var(--bg-secondary); border-radius: 4px;">
            <strong>To enable a capability:</strong>
            <ol style="margin: 0.5rem 0 0 1.5rem; padding: 0;">
                {% if not system_capabilities.nmap_sudo %}
                <li>For sudo nmap: <code>echo "hsuite ALL=(ALL) NOPASSWD: /usr/bin/nmap" | sudo tee -a /etc/sudoers.d/hsuite</code></li>
                {% endif %}
                {% if not system_capabilities.self_restart %}
                <li>For self-restart: <code>echo "hsuite ALL=(ALL) NOPASSWD: /usr/bin/systemctl restart hsuite" | sudo tee -a /etc/sudoers.d/hsuite</code></li>
                {% endif %}
                <li>Add <code>NMAP_USE_SUDO=true</code> and/or <code>SELF_RESTART_ENABLED=true</code> to <code>/opt/hsuite/.env</code></li>
                <li>Restart Hermetic Suite: <code>sudo systemctl restart hsuite</code></li>
            </ol>
        </div>
        {% endif %}
    </div>
</div>

{% if current_user and current_user.is_admin %}
<div class="card">
    <div class="card-header">
        <h2>Email Notifications (SMTP)</h2>
    </div>
    <div class="card-body">
        <p class="text-muted" style="margin-bottom: 1rem;">
            Configure SMTP settings for email notifications from plugins.
            Users can set their email address in their profile to receive alerts.
        </p>
        <form action="{{ url_for('settings.update_smtp_settings') }}" method="POST">
            <div class="form-row">
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="smtp_enabled" {% if smtp_settings.enabled %}checked{% endif %}>
                        Enable email notifications
                    </label>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="smtp_host">SMTP Host</label>
                    <input type="text" id="smtp_host" name="smtp_host" 
                           value="{{ smtp_settings.host }}" placeholder="smtp.example.com">
                </div>
                <div class="form-group">
                    <label for="smtp_port">Port</label>
                    <input type="number" id="smtp_port" name="smtp_port" 
                           value="{{ smtp_settings.port or 587 }}" style="width: 100px;">
                </div>
                <div class="form-group">
                    <label class="checkbox-label" style="margin-top: 1.75rem;">
                        <input type="checkbox" name="smtp_use_tls" {% if smtp_settings.use_tls %}checked{% endif %}>
                        Use TLS
                    </label>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="smtp_username">Username</label>
                    <input type="text" id="smtp_username" name="smtp_username" 
                           value="{{ smtp_settings.username }}" placeholder="your-email@example.com">
                </div>
                <div class="form-group">
                    <label for="smtp_password">Password</label>
                    <input type="password" id="smtp_password" name="smtp_password" 
                           placeholder="{% if smtp_settings.password_encrypted %}(unchanged){% else %}Enter password{% endif %}">
                    <small class="text-muted">Leave blank to keep existing password</small>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="smtp_from_address">From Address</label>
                    <input type="email" id="smtp_from_address" name="smtp_from_address" 
                           value="{{ smtp_settings.from_address }}" placeholder="alerts@example.com">
                </div>
                <div class="form-group">
                    <label for="smtp_from_name">From Name</label>
                    <input type="text" id="smtp_from_name" name="smtp_from_name" 
                           value="{{ smtp_settings.from_name or 'Hermetic Suite' }}" placeholder="Hermetic Suite">
                </div>
            </div>
            <div style="display: flex; gap: 1rem;">
                <button type="submit" class="btn btn-primary">Save SMTP Settings</button>
                <button type="button" class="btn btn-secondary" onclick="testSmtpConnection()">Test Connection</button>
            </div>
        </form>
        <div id="smtp-test-result" style="margin-top: 1rem; display: none;"></div>
    </div>
</div>

<script>
function testSmtpConnection() {
    var form = document.querySelector('form[action*="smtp"]');
    var result = document.getElementById('smtp-test-result');
    
    result.innerHTML = '<span class="text-muted">Testing connection...</span>';
    result.style.display = 'block';
    
    var formData = new FormData(form);
    formData.append('test_only', 'true');
    
    fetch('{{ url_for("settings.test_smtp") }}', {
        method: 'POST',
        body: formData
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
        if (data.success) {
            result.innerHTML = '<span class="badge badge-success">✓ Connection successful</span>';
        } else {
            result.innerHTML = '<span class="badge badge-danger">✗ ' + data.message + '</span>';
        }
    })
    .catch(function(err) {
        result.innerHTML = '<span class="badge badge-danger">✗ Test failed</span>';
    });
}
</script>
{% endif %}

<div class="card">
    <div class="card-header">
        <h2>Scan Profiles</h2>
        <button onclick="toggleProfileForm()" class="btn btn-sm btn-primary">+ Add Profile</button>
    </div>
    <div class="card-body">
        <div id="add-profile-form" style="display: none; margin-bottom: 1rem; padding: 1rem; background: var(--bg-secondary); border-radius: 8px;">
            <form action="{{ url_for('settings.settings_page') }}" method="POST">
                <div class="form-row">
                    <div class="form-group">
                        <label for="name">Profile Name</label>
                        <input type="text" id="name" name="name" required placeholder="Quick Web Scan">
                    </div>
                    <div class="form-group">
                        <label for="scan_type">Scan Type</label>
                        <select id="scan_type" name="scan_type">
                            <option value="server">Server</option>
                            <option value="server_auth">Server (Authenticated)</option>
                            <option value="domain">Domain</option>
                            <option value="discovery">Discovery</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label for="port_range">Port Range</label>
                        <input type="text" id="port_range" name="port_range" value="1-65535" placeholder="1-65535">
                    </div>
                    <div class="form-group">
                        <label for="nmap_args">nmap Arguments</label>
                        <input type="text" id="nmap_args" name="nmap_args" value="-sV -sC" placeholder="-sV -sC">
                    </div>
                    <div class="form-group">
                        <label for="timeout">Timeout (seconds)</label>
                        <input type="number" id="timeout" name="timeout" value="300">
                    </div>
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea id="description" name="description" placeholder="Quick scan for web servers"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">Save Profile</button>
            </form>
        </div>
        
        {% if profiles %}
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Ports</th>
                    <th>nmap Args</th>
                    <th>Timeout</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for profile in profiles %}
                <tr>
                    <td>
                        <strong>{{ profile.name }}</strong>
                        {% if profile.description %}
                        <br><small class="text-muted">{{ profile.description }}</small>
                        {% endif %}
                    </td>
                    <td>{{ profile.scan_type.value }}</td>
                    <td><code>{{ profile.port_range }}</code></td>
                    <td><code>{{ profile.nmap_args }}</code></td>
                    <td>{{ profile.timeout_per_host }}s</td>
                    <td>
                        <form action="{{ url_for('settings.settings_page', profile_id=profile.id) }}" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this profile?')">Delete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="empty-state">No scan profiles configured. Add one to customize your scans.</p>
        {% endif %}
    </div>
</div>

{% if current_user and current_user.is_admin %}
<div class="card">
    <div class="card-header">
        <h2>SSH Keys</h2>
        <button onclick="toggleSSHKeyForm()" class="btn btn-sm btn-primary">+ Add SSH Key</button>
    </div>
    <div class="card-body">
        <div id="add-ssh-key-form" style="display: none; margin-bottom: 1rem; padding: 1rem; background: var(--bg-secondary); border-radius: 8px;">
            <form action="{{ url_for('settings.add_ssh_key') }}" method="POST" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="ssh_key_name">Key Name</label>
                    <input type="text" id="ssh_key_name" name="name" required placeholder="Production Key">
                </div>
                <div class="form-group">
                    <label>Private Key Input Method:</label>
                    <div style="display: flex; gap: 1rem; margin: 0.5rem 0;">
                        <label class="radio-label">
                            <input type="radio" name="key_input_method" value="file" checked onchange="toggleSettingsKeyInput()"> Upload file
                        </label>
                        <label class="radio-label">
                            <input type="radio" name="key_input_method" value="text" onchange="toggleSettingsKeyInput()"> Paste key
                        </label>
                    </div>
                </div>
                <div id="settings-key-file-input" class="form-group">
                    <label for="ssh_key_file">Select Key File</label>
                    <input type="file" id="ssh_key_file" name="ssh_key_file" accept=".pem,.key,*">
                    <small class="text-muted">Select your private key file (e.g., id_rsa, key.pem)</small>
                </div>
                <div id="settings-key-text-input" class="form-group" style="display: none;">
                    <label for="private_key">Private Key (PEM Format)</label>
                    <textarea id="private_key" name="private_key" rows="10" placeholder="-----BEGIN RSA PRIVATE KEY-----
...
-----END RSA PRIVATE KEY-----"></textarea>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="is_default"> Set as default key
                    </label>
                </div>
                <button type="submit" class="btn btn-primary">Save Key</button>
            </form>
        </div>
        
        {% if ssh_keys %}
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Fingerprint</th>
                    <th>Default</th>
                    <th>Created</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for key in ssh_keys %}
                <tr>
                    <td><strong>{{ key.name }}</strong></td>
                    <td><code>{{ key.key_type }}</code></td>
                    <td><code style="font-size: 0.75rem;">{{ key.fingerprint or 'N/A' }}</code></td>
                    <td>
                        {% if key.is_default %}
                        <span class="badge badge-success">Default</span>
                        {% else %}
                        <form action="{{ url_for('settings.set_default_ssh_key', key_id=key.id) }}" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-sm btn-secondary">Set Default</button>
                        </form>
                        {% endif %}
                    </td>
                    <td>{{ key.created_at.strftime('%Y-%m-%d') }}</td>
                    <td>
                        <form action="{{ url_for('settings.delete_ssh_key', key_id=key.id) }}" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this SSH key? Servers using it will fall back to the default key.')">Delete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="empty-state">No SSH keys configured. Add a key to enable authenticated scanning.</p>
        {% endif %}
    </div>
</div>

<script>
function toggleSSHKeyForm() {
    var form = document.getElementById('add-ssh-key-form');
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
}
</script>

<div class="card">
    <div class="card-header">
        <h2>User Management</h2>
        <button onclick="toggleUserForm()" class="btn btn-sm btn-primary">+ Add User</button>
    </div>
    <div class="card-body">
        <div id="add-user-form" style="display: none; margin-bottom: 1rem; padding: 1rem; background: var(--bg-secondary); border-radius: 8px;">
            <form action="{{ url_for('settings.add_user') }}" method="POST">
                <div class="form-row">
                    <div class="form-group">
                        <label for="new_username">Username</label>
                        <input type="text" id="new_username" name="username" required placeholder="jsmith">
                    </div>
                    <div class="form-group">
                        <label for="new_password">Password</label>
                        <input type="password" id="new_password" name="password" required minlength="8" placeholder="Min 8 characters">
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label" style="margin-top: 1.75rem;">
                            <input type="checkbox" name="is_admin"> Admin privileges
                        </label>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">Create User</button>
            </form>
        </div>
        
        {% if users %}
        <table class="table">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Last Login</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td><strong>{{ user.username }}</strong></td>
                    <td>{{ user.email or '-' }}</td>
                    <td>
                        <span class="badge badge-{{ 'critical' if user.is_admin else 'info' }}">
                            {{ 'Admin' if user.is_admin else 'User' }}
                        </span>
                    </td>
                    <td>
                        <span class="badge badge-{{ 'success' if user.is_active else 'secondary' }}">
                            {{ 'Active' if user.is_active else 'Disabled' }}
                        </span>
                    </td>
                    <td>{{ user.last_login.strftime('%Y-%m-%d %H:%M') if user.last_login else 'Never' }}</td>
                    <td>
                        {% if user.username != current_user.username %}
                        <form action="{{ url_for('settings.delete_user', user_id=user.id) }}" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete user {{ user.username }}?')">Delete</button>
                        </form>
                        {% else %}
                        <span class="text-muted">(you)</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="empty-state">No users found.</p>
        {% endif %}
    </div>
</div>

<script>
function toggleUserForm() {
    var form = document.getElementById('add-user-form');
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
}
</script>
{% endif %}

<div class="card">
    <div class="card-header">
        <h2>Common nmap Arguments</h2>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Argument</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr><td><code>-sV</code></td><td>Service version detection</td></tr>
                <tr><td><code>-sC</code></td><td>Run default NSE scripts</td></tr>
                <tr><td><code>-O</code></td><td>OS detection (requires root)</td></tr>
                <tr><td><code>-sS</code></td><td>TCP SYN scan (stealthy, requires root)</td></tr>
                <tr><td><code>-sT</code></td><td>TCP connect scan (no root required)</td></tr>
                <tr><td><code>-sU</code></td><td>UDP scan (slow)</td></tr>
                <tr><td><code>-A</code></td><td>Aggressive scan (OS, version, scripts, traceroute)</td></tr>
                <tr><td><code>-T4</code></td><td>Timing template (0-5, higher = faster)</td></tr>
                <tr><td><code>--script vulners</code></td><td>Use vulners.com vulnerability database</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script>
function toggleProfileForm() {
    var form = document.getElementById('add-profile-form');
    form.style.display = form.style.display === 'none' ? 'block' : 'none';
}

function toggleSettingsKeyInput() {
    var method = document.querySelector('input[name="key_input_method"]:checked').value;
    document.getElementById('settings-key-file-input').style.display = method === 'file' ? 'block' : 'none';
    document.getElementById('settings-key-text-input').style.display = method === 'text' ? 'block' : 'none';
}
</script>

<style>
.radio-label {
    cursor: pointer;
}
.radio-label input {
    margin-right: 0.25rem;
}
</style>
{% endblock %}