{% extends "base.html" %}
{% block title %}Edit {{ conn.name }} - Databases{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="icon" id="databases">Edit Database Connection</h1>
    <p class="subtitle">{{ conn.name }}</p>
    <div class="header-actions">
        <a href="{{ url_for('databases.detail', connection_id=conn.id) }}" class="btn btn-secondary">← Back</a>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ url_for('databases.edit_connection', connection_id=conn.id) }}">
            <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 value="{{ conn.name }}">
                </div>
                
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea id="description" name="description" rows="2">{{ conn.description or '' }}</textarea>
                </div>
                
                <div class="form-group">
                    <label for="db_type">Database Type *</label>
                    <select id="db_type" name="db_type" required>
                        <option value="postgresql" {% if conn.db_type == 'postgresql' %}selected{% endif %}>PostgreSQL</option>
                        <option value="mysql" {% if conn.db_type == 'mysql' %}selected{% endif %}>MySQL / MariaDB</option>
                        <option value="mssql" {% if conn.db_type == 'mssql' %}selected{% endif %}>Microsoft SQL Server</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label>
                        <input type="checkbox" name="enabled" {% if conn.enabled %}checked{% endif %}>
                        Enabled
                    </label>
                </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 value="{{ conn.host }}">
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <label for="port">Port *</label>
                        <input type="number" id="port" name="port" required value="{{ conn.port }}">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="database_name">Database Name *</label>
                    <input type="text" id="database_name" name="database_name" required value="{{ conn.database_name }}">
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="username">Username *</label>
                        <input type="text" id="username" name="username" required value="{{ conn.username }}">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" id="password" name="password" placeholder="Leave blank to keep current">
                        <small class="text-muted">Leave blank to keep existing password</small>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="ssl_mode">SSL Mode</label>
                    <select id="ssl_mode" name="ssl_mode">
                        <option value="prefer" {% if conn.ssl_mode == 'prefer' %}selected{% endif %}>Prefer</option>
                        <option value="require" {% if conn.ssl_mode == 'require' %}selected{% endif %}>Require</option>
                        <option value="disable" {% if conn.ssl_mode == 'disable' %}selected{% endif %}>Disable</option>
                        <option value="verify-ca" {% if conn.ssl_mode == 'verify-ca' %}selected{% endif %}>Verify CA</option>
                        <option value="verify-full" {% if conn.ssl_mode == 'verify-full' %}selected{% endif %}>Verify Full</option>
                    </select>
                </div>
            </div>
            
            <div class="form-section">
                <h3>SSH Tunnel (Optional)</h3>
                
                <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 }}" {% if conn.tunnel_server_id == server.id %}selected{% endif %}>
                            {{ server.hostname or server.ip_address }} ({{ server.ip_address }})
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Save Changes</button>
                <a href="{{ url_for('databases.detail', connection_id=conn.id) }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

<!-- Custom Thresholds for this Database -->
<div class="card">
    <div class="card-header">
        <h2>Custom Thresholds</h2>
    </div>
    <div class="card-body">
        <p class="text-muted" style="margin-bottom: 1rem;">
            Override the default thresholds for this specific database. Leave unchecked to use the 
            <a href="{{ url_for('databases.config_page') }}">global defaults</a>.
        </p>
        
        <table class="table">
            <thead>
                <tr>
                    <th>Metric</th>
                    <th>Use Custom</th>
                    <th>Warning</th>
                    <th>Critical</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for metric_type, metric_info in [
                    ('connection_percent', {'label': 'Connection Percent', 'desc': '% of max connections', 'comparison': '>'}),
                    ('query_duration_ms', {'label': 'Query Duration', 'desc': 'milliseconds', 'comparison': '>'}),
                    ('cache_hit_ratio', {'label': 'Cache Hit Ratio', 'desc': '% hit rate', 'comparison': '<'})
                ] %}
                {% set custom = custom_thresholds.get(metric_type) %}
                <tr>
                    <form method="POST" action="{{ url_for('databases.update_threshold', connection_id=conn.id) }}">
                        <input type="hidden" name="metric_type" value="{{ metric_type }}">
                        <input type="hidden" name="comparison" value="{{ metric_info.comparison }}">
                        <td>
                            <strong>{{ metric_info.label }}</strong>
                            <br><small class="text-muted">{{ metric_info.desc }}</small>
                        </td>
                        <td>
                            <input type="checkbox" name="use_custom" {% if custom %}checked{% endif %}
                                   onchange="toggleCustomThreshold(this, '{{ metric_type }}')">
                        </td>
                        <td>
                            <input type="number" name="warning" id="warning_{{ metric_type }}"
                                   value="{{ custom.warning_threshold if custom else defaults.get(metric_type, {}).get('warning', '') }}" 
                                   step="0.1" style="width: 80px;"
                                   {% if not custom %}disabled{% endif %}>
                        </td>
                        <td>
                            <input type="number" name="critical" id="critical_{{ metric_type }}"
                                   value="{{ custom.critical_threshold if custom else defaults.get(metric_type, {}).get('critical', '') }}" 
                                   step="0.1" style="width: 80px;"
                                   {% if not custom %}disabled{% endif %}>
                        </td>
                        <td>
                            <button type="submit" class="btn btn-sm btn-primary">Save</button>
                        </td>
                    </form>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="card" style="border-left: 4px solid var(--danger);">
    <div class="card-header">
        <h2>Danger Zone</h2>
    </div>
    <div class="card-body">
        <p>Deleting this connection will also remove all associated metrics, audits, and alerts.</p>
        <form action="{{ url_for('databases.delete_connection', connection_id=conn.id) }}" method="POST"
              onsubmit="return confirm('Are you sure you want to delete this database connection? This cannot be undone.')">
            <button type="submit" class="btn btn-danger">🗑️ Delete Connection</button>
        </form>
    </div>
</div>

<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>

<script>
function toggleCustomThreshold(checkbox, metricType) {
    const warningInput = document.getElementById('warning_' + metricType);
    const criticalInput = document.getElementById('critical_' + metricType);
    
    warningInput.disabled = !checkbox.checked;
    criticalInput.disabled = !checkbox.checked;
}
</script>
{% endblock %}