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

{% block content %}
<div class="page-header">
    <h1 class="icon" id="databases">Add Database Connection</h1>
    <p class="subtitle">Configure a new database to monitor</p>
    <div class="header-actions">
        <a href="{{ url_for('databases.index') }}" class="btn btn-secondary">← Back</a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ url_for('databases.add_connection') }}">
            <div class="form-section">
                <h3>Basic Information</h3>
                
                <div class="form-group">
                    <label for="name">Connection Name *</label>
                    <input type="text" id="name" name="name" required placeholder="e.g., Production PostgreSQL">
                </div>
                
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea id="description" name="description" rows="2" placeholder="Optional description"></textarea>
                </div>
                
                <div class="form-group">
                    <label for="db_type">Database Type *</label>
                    <select id="db_type" name="db_type" required onchange="updateDefaultPort()">
                        <option value="postgresql">PostgreSQL</option>
                        <option value="mysql">MySQL / MariaDB</option>
                        <option value="mssql">Microsoft SQL Server</option>
                    </select>
                </div>
            </div>
            
            <div class="form-section">
                <h3>Connection Details</h3>
                
                <div class="form-row">
                    <div class="form-group" style="flex: 2;">
                        <label for="host">Host *</label>
                        <input type="text" id="host" name="host" required placeholder="e.g., db.example.com or 10.0.0.5">
                        <small class="text-muted">Hostname or IP address. Can be RDS endpoint.</small>
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <label for="port">Port *</label>
                        <input type="number" id="port" name="port" required value="5432">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="database_name">Database Name *</label>
                    <input type="text" id="database_name" name="database_name" required placeholder="e.g., myapp_production">
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="username">Username *</label>
                        <input type="text" id="username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="password">Password *</label>
                        <input type="password" id="password" name="password" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="ssl_mode">SSL Mode</label>
                    <select id="ssl_mode" name="ssl_mode">
                        <option value="prefer">Prefer (use if available)</option>
                        <option value="require">Require (always use SSL)</option>
                        <option value="disable">Disable (never use SSL)</option>
                        <option value="verify-ca">Verify CA</option>
                        <option value="verify-full">Verify Full</option>
                    </select>
                </div>
            </div>
            
            <div class="form-section">
                <h3>SSH Tunnel (Optional)</h3>
                <p class="text-muted">If the database is not directly accessible, select a server to use as an SSH tunnel.</p>
                
                <div class="form-group">
                    <label for="tunnel_server_id">Tunnel Server</label>
                    <select id="tunnel_server_id" name="tunnel_server_id">
                        <option value="">No tunnel (direct connection)</option>
                        {% for server in servers %}
                        <option value="{{ server.id }}">{{ server.hostname or server.ip_address }} ({{ server.ip_address }})</option>
                        {% endfor %}
                    </select>
                    <small class="text-muted">The SSH key configured for this server will be used.</small>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Add Connection</button>
                <a href="{{ url_for('databases.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
function updateDefaultPort() {
    const dbType = document.getElementById('db_type').value;
    const portField = document.getElementById('port');
    
    const defaults = {
        'postgresql': 5432,
        'mysql': 3306,
        'mssql': 1433,
    };
    
    portField.value = defaults[dbType] || 5432;
}
</script>

<style>
.form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h3 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    flex: 1;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
</style>
{% endblock %}