<div class="modal fade database-settings-modal" id="databaseConnectionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <form id="databaseConnectionForm" novalidate>
                <?= \PpPhp\Core\Security::CSRF()->HiddenField() ?>
                <input type="hidden" name="db_type" id="editDbType" value="mysql">
                <div class="modal-header database-settings-header px-3 px-md-4 py-3">
                    <div class="d-flex align-items-center gap-3 min-w-0">
                        <span class="database-settings-header-icon"><i class="bi bi-database-gear"></i></span>
                        <div class="min-w-0">
                            <div class="d-flex flex-wrap align-items-center gap-2">
                                <h5 class="modal-title mb-0">Database Connection</h5>
                                <span class="database-current-engine" id="editDbCurrentEngine">Loading…</span>
                            </div>
                            <div class="database-settings-subtitle text-truncate">Update <strong id="editDbProjectName">project</strong> without exposing its saved password.</div>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body p-0 position-relative">
                    <div class="database-settings-loading" id="editDbLoading">
                        <span class="spinner-border text-primary" aria-hidden="true"></span>
                        <span>Loading connection profile…</span>
                    </div>

                    <div class="database-settings-layout">
                        <aside class="database-engine-panel">
                            <div class="section-eyebrow mb-1">Database engine</div>
                            <p class="small text-muted mb-3">Choose the source used by this project.</p>
                            <div class="database-engine-list" id="editDatabaseEngineList">
                                <?php foreach ($databaseTypes as $type => $db): ?>
                                    <button type="button"
                                        class="database-engine-choice <?= empty($db['available']) ? 'is-disabled' : '' ?>"
                                        data-edit-db-type="<?= htmlspecialchars($type) ?>"
                                        data-available="<?= !empty($db['available']) ? '1' : '0' ?>"
                                        style="--db-color:<?= htmlspecialchars($db['color']) ?>;--db-tint:<?= htmlspecialchars($db['tint']) ?>"
                                        title="<?= htmlspecialchars($db['description'] . ' ' . $db['requirement']) ?>"
                                        <?= empty($db['available']) ? 'disabled' : '' ?>>
                                        <span class="database-engine-choice-icon"><i class="bi bi-<?= htmlspecialchars($db['icon']) ?>"></i></span>
                                        <span class="database-engine-choice-copy">
                                            <strong><?= htmlspecialchars($db['label']) ?></strong>
                                            <small><?= htmlspecialchars($db['available'] ? 'PDO ready' : $db['requirement']) ?></small>
                                        </span>
                                        <i class="bi bi-check-circle-fill database-engine-selected"></i>
                                    </button>
                                <?php endforeach; ?>
                            </div>
                            <div class="database-engine-note mt-3">
                                <i class="bi bi-shield-lock"></i>
                                <span>Credentials remain in the server-side project configuration.</span>
                            </div>
                        </aside>

                        <section class="database-connection-editor">
                            <div class="database-connection-heading">
                                <div>
                                    <div class="section-eyebrow">Connection profile</div>
                                    <h6 class="mb-1">Connect with <span id="editDbSelectedLabel">MySQL</span></h6>
                                    <p class="mb-0" id="editDbSelectedDescription">Configure and test this connection before saving.</p>
                                </div>
                                <div class="database-saved-summary">
                                    <span>Currently saved</span>
                                    <strong id="editDbSavedSummary">—</strong>
                                </div>
                            </div>

                            <div class="database-source-warning d-none" id="editDbSourceWarning">
                                <i class="bi bi-signpost-split-fill"></i>
                                <div>
                                    <strong>You are switching the project's data source.</strong>
                                    <p>This does not migrate, copy, or delete data. Existing design files are preserved; synchronize the Tables module after saving.</p>
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" name="confirm_source_change" value="1" id="editDbConfirmSourceChange">
                                        <label class="form-check-label" for="editDbConfirmSourceChange">I understand and want to switch this project to the new source.</label>
                                    </div>
                                </div>
                            </div>

                            <div class="database-fields-card">
                                <div class="row g-3" id="editDbServerFields">
                                    <div class="col-md-5">
                                        <label class="form-label">Host / server</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-hdd-network"></i></span>
                                            <input type="text" name="db_host" class="form-control" autocomplete="off" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Port</label>
                                        <input type="number" name="db_port" class="form-control" min="1" max="65535" required>
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label" id="editDbNameLabel">Database name</label>
                                        <input type="text" name="db_name" class="form-control" autocomplete="off" required>
                                    </div>
                                </div>

                                <div class="row g-3 d-none" id="editDbSqliteFields">
                                    <div class="col-12">
                                        <label class="form-label">SQLite file</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-file-earmark-binary"></i></span>
                                            <input type="text" name="db_path" class="form-control" placeholder="database/app.sqlite">
                                        </div>
                                        <div class="form-text">Use a project-relative path. Missing files are created during connection testing.</div>
                                    </div>
                                </div>

                                <div class="row g-3 mt-0" id="editDbCredentialFields">
                                    <div class="col-md-5">
                                        <label class="form-label">Username</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-person"></i></span>
                                            <input type="text" name="db_user" class="form-control" autocomplete="username">
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <label class="form-label">Password</label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="bi bi-key"></i></span>
                                            <input type="password" name="db_pass" id="editDbPassword" class="form-control" autocomplete="new-password">
                                            <button class="btn btn-outline-secondary" type="button" id="editDbTogglePassword" title="Show or hide password"><i class="bi bi-eye"></i></button>
                                        </div>
                                        <div class="d-flex flex-wrap justify-content-between gap-2 mt-1">
                                            <small class="text-muted" id="editDbPasswordHint">Leave blank to keep the saved password.</small>
                                            <div class="form-check form-check-inline m-0">
                                                <input class="form-check-input" type="checkbox" name="clear_password" value="1" id="editDbClearPassword">
                                                <label class="form-check-label small" for="editDbClearPassword">Clear saved password</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <details class="database-advanced mt-3" id="editDbAdvanced">
                                <summary><i class="bi bi-sliders me-2"></i>Advanced and security options <i class="bi bi-chevron-down ms-auto"></i></summary>
                                <div class="database-advanced-body">
                                    <div class="row g-3">
                                        <div class="col-md-4" id="editDbCharsetField">
                                            <label class="form-label">Character set</label>
                                            <input type="text" name="db_charset" class="form-control">
                                        </div>
                                        <div class="col-md-4 d-none" id="editDbSchemaField">
                                            <label class="form-label">Default schema</label>
                                            <input type="text" name="db_schema" class="form-control">
                                        </div>
                                        <div class="col-md-4 d-none" id="editDbOracleServiceField">
                                            <label class="form-label">Service name</label>
                                            <input type="text" name="db_service" class="form-control">
                                        </div>
                                        <div class="col-md-8 d-none" id="editDbMysqlSslFields">
                                            <input type="hidden" name="db_ssl_enabled" value="0">
                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="checkbox" name="db_ssl_enabled" value="1" id="editDbSslEnabled">
                                                <label class="form-check-label" for="editDbSslEnabled">Use TLS/SSL</label>
                                            </div>
                                            <input type="text" name="db_ssl_ca" class="form-control" placeholder="Optional CA certificate path">
                                        </div>
                                        <div class="col-md-4 d-none" id="editDbPostgresSslField">
                                            <label class="form-label">SSL mode</label>
                                            <select name="db_ssl_mode" class="form-select">
                                                <option value="prefer">Prefer</option>
                                                <option value="require">Require</option>
                                                <option value="verify-ca">Verify CA</option>
                                                <option value="verify-full">Verify full</option>
                                                <option value="disable">Disable</option>
                                            </select>
                                        </div>
                                        <div class="col-md-8 d-none" id="editDbSqlServerSecurityFields">
                                            <input type="hidden" name="db_encrypt" value="0">
                                            <input type="hidden" name="db_trust_server_certificate" value="0">
                                            <div class="d-flex flex-wrap gap-4 pt-2">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="db_encrypt" value="1" id="editDbEncrypt">
                                                    <label class="form-check-label" for="editDbEncrypt">Encrypt connection</label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="db_trust_server_certificate" value="1" id="editDbTrustCertificate">
                                                    <label class="form-check-label" for="editDbTrustCertificate">Trust server certificate</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </details>

                            <div class="database-test-result mt-3" id="editDbTestResult" role="status" aria-live="polite">
                                <i class="bi bi-info-circle"></i>
                                <span>Test the connection after making changes. Saving remains locked until the current values pass.</span>
                            </div>
                        </section>
                    </div>
                </div>

                <div class="modal-footer database-settings-footer px-3 px-md-4 py-3">
                    <div class="database-unsaved-indicator me-auto" id="editDbUnsavedIndicator"><span></span> Saved profile loaded</div>
                    <button type="button" class="btn btn-light border" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-outline-primary" id="editDbTestButton"><i class="bi bi-plug me-1"></i> Test connection</button>
                    <button type="submit" class="btn btn-primary" id="editDbSaveButton" disabled><i class="bi bi-check2-circle me-1"></i> Save connection</button>
                </div>
            </form>
        </div>
    </div>
</div>
