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

{% block content %}
<div class="page-header">
    <h1 class="icon" id="settings">Welcome to Hermetic Suite</h1>
    <p class="subtitle">Let's configure your scanner</p>
</div>

<div class="setup-wizard">
    <form action="{{ url_for('settings.setup_wizard') }}" method="POST" enctype="multipart/form-data">
        
        <div class="card">
            <div class="card-header">
                <h2>Step 1: Network Ranges</h2>
            </div>
            <div class="card-body">
                <p>Enter the CIDR ranges for your internal network. These will be used for host discovery.</p>
                
                <div class="form-group">
                    <label for="cidr_ranges">Internal CIDR Ranges (comma-separated)</label>
                    <input type="text" id="cidr_ranges" name="cidr_ranges" 
                           value="{{ current_cidrs | join(', ') }}"
                           placeholder="172.30.0.0/24, 172.30.1.0/24, 10.0.0.0/16">
                    <small>Examples: 10.0.0.0/16 covers 10.0.0.0-10.0.255.255, 172.30.0.0/24 covers 172.30.0.0-172.30.0.255</small>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>Step 2: SSH Key (Optional)</h2>
            </div>
            <div class="card-body">
                <p>Add an SSH key to enable authenticated scanning. This allows Hermetic Suite to:</p>
                <ul style="margin-bottom: 1rem; padding-left: 1.5rem;">
                    <li>Get server hostnames instead of DNS names</li>
                    <li>Check actual installed package versions</li>
                    <li>Detect which vulnerabilities are already patched</li>
                </ul>
                
                <div class="form-group">
                    <label for="ssh_key_name">Key Name</label>
                    <input type="text" id="ssh_key_name" name="ssh_key_name" 
                           placeholder="Production Servers Key">
                </div>
                
                <div class="form-group">
                    <label>SSH Private Key (.pem file or paste text)</label>
                    
                    <div class="radio-group">
                        <label class="radio-label">
                            <input type="radio" name="key_input_method" value="file" checked onchange="toggleKeyInput()">
                            <span>Upload .pem file</span>
                        </label>
                        <label class="radio-label">
                            <input type="radio" name="key_input_method" value="text" onchange="toggleKeyInput()">
                            <span>Paste key text</span>
                        </label>
                    </div>
                    
                    <div id="key-file-input">
                        <input type="file" id="ssh_key_file" name="ssh_key_file" accept=".pem,.key">
                        <small>Select your .pem private key file</small>
                    </div>
                    
                    <div id="key-text-input" style="display: none;">
                        <textarea id="ssh_key_text" name="ssh_key_text" rows="8" 
                            placeholder="-----BEGIN RSA PRIVATE KEY-----&#10;...&#10;-----END RSA PRIVATE KEY-----"
                            style="font-family: monospace; font-size: 0.8rem;"></textarea>
                        <small>Paste your private key contents here</small>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="default_ssh_user">Default SSH Username</label>
                    <input type="text" id="default_ssh_user" name="default_ssh_user" 
                           value="ubuntu" placeholder="ubuntu">
                    <small>The username used to connect to your servers</small>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <h2>What's Next?</h2>
            </div>
            <div class="card-body">
                <p>After setup, you can:</p>
                <ul style="margin-bottom: 1rem; padding-left: 1.5rem;">
                    <li><strong>Discovery</strong> - Scan your network to find servers</li>
                    <li><strong>Scan</strong> - Run vulnerability scans on discovered servers</li>
                    <li><strong>Settings</strong> - Manage SSH keys, users, and scan profiles</li>
                </ul>
                <p class="text-muted">You can always change these settings later from the Settings page.</p>
            </div>
        </div>
        
        <div class="setup-actions" style="margin-top: 1.5rem; display: flex; gap: 1rem;">
            <button type="submit" name="action" value="save" class="btn btn-primary">
                Save & Go to Discovery
            </button>
            <button type="submit" name="action" value="skip" class="btn btn-secondary">
                Skip Setup
            </button>
        </div>
    </form>
</div>

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

<style>
.setup-wizard .card {
    margin-bottom: 1.5rem;
}
.radio-group {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}
.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.radio-label input[type="radio"] {
    margin: 0;
}
</style>
{% endblock %}