<div class="modal fade" id="editTableModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered table-schema-modal">
        <div class="modal-content">
            <div class="modal-header bg-info text-white py-2">
                <h6 class="modal-title"><i class="bi bi-pencil me-2"></i>Edit Table</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close edit table"></button>
            </div>
            <div class="modal-body py-2">
                <!-- Table rename -->
                <div class="schema-top-row mb-2">
                    <div class="schema-table-meta">
                        <label class="form-label small mb-1 fw-semibold">Table Name</label>
                        <input type="text" class="form-control form-control-sm" id="editTableNameInput" placeholder="e.g., customers">
                    </div>
                    <div class="schema-help">
                        <i class="bi bi-info-circle"></i>
                        <span><strong><?= htmlspecialchars((string)($databaseDialect['label'] ?? 'Database')) ?></strong> · <strong>PK</strong> marks the primary key. <strong>AI</strong> uses this engine's identity strategy. Default mode controls omitted values.</span>
                    </div>
                </div>
                <div class="schema-section-title">
                    <h6 class="small mb-0">Fields</h6>
                    <span class="text-muted small">Edit field structure carefully; saving applies database changes.</span>
                </div>
                <div class="schema-fields-wrap">
                    <div class="schema-field-header">
                        <span>Field</span>
                        <span>Type</span>
                        <span>Size / scale</span>
                        <span>Null</span>
                        <span>Default</span>
                        <span>Keys</span>
                        <span></span>
                    </div>
                    <div id="editFieldRows" class="schema-field-rows">
                        <!-- Dynamically filled by JS -->
                    </div>
                </div>
                <button class="btn btn-sm btn-outline-secondary mt-2" id="editAddFieldBtn" data-bs-toggle="tooltip" title="Add a new field to the existing table structure."><i class="bi bi-plus"></i> Add Field</button>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-danger me-auto" id="btnDeleteTable" data-bs-toggle="tooltip" title="Permanently drop this table or view and remove its saved Tables-module state."><i class="bi bi-trash"></i> Delete Table</button>
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" data-bs-toggle="tooltip" title="Close without applying structural changes.">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnSaveTableChanges" data-bs-toggle="tooltip" title="Apply schema changes to the database and update saved schema metadata.">Save Changes</button>
            </div>
        </div>
    </div>
</div>
