<div class="modal fade" id="createTableModal" 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-primary text-white py-2">
                <h6 class="modal-title"><i class="bi bi-plus-circle me-2"></i>Create New Table</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close create table"></button>
            </div>
            <div class="modal-body py-2">
                <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="newTableName" 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">Name, type, nullability, default and key options</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="fieldRows" class="schema-field-rows">
                    <div class="field-row schema-field-row">
                        <div class="schema-cell field-name-cell"><input type="text" class="form-control form-control-sm field-name" placeholder="Field name"></div>
                        <div class="schema-cell field-type-cell">
                            <select class="form-select form-select-sm field-type">
                                <?php foreach ((array)($databaseDialect['field_types'] ?? ['VARCHAR']) as $fieldType): ?>
                                    <option value="<?= htmlspecialchars((string)$fieldType) ?>" <?= $fieldType === 'VARCHAR' ? 'selected' : '' ?>><?= htmlspecialchars((string)$fieldType) ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="schema-cell field-size-cell">
                            <input type="number" class="form-control form-control-sm field-size" placeholder="Size" value="255" min="0">
                            <input type="number" class="form-control form-control-sm field-scale" placeholder="Scale" value="2" min="0" style="display:none">
                        </div>
                        <div class="schema-cell field-null-cell">
                            <select class="form-select form-select-sm null-select">
                                <option value="1">NULL</option><option value="0">NOT NULL</option>
                            </select>
                        </div>
                        <div class="schema-cell default-cell">
                            <select class="form-select form-select-sm default-mode" title="Default mode">
                                <option value="NONE">No default</option>
                                <option value="NULL">NULL</option>
                                <option value="VALUE">Value</option>
                                <option value="CURRENT_TIMESTAMP">Current time</option>
                                <option value="EXPRESSION">Expression</option>
                            </select>
                            <input type="text" class="form-control form-control-sm field-default" placeholder="Default value">
                        </div>
                        <div class="schema-cell field-key-cell">
                            <div class="form-check form-check-inline small mb-0 schema-check schema-check-pk">
                                <input type="checkbox" class="form-check-input pk-check" id="pk_0">
                                <label class="form-check-label" for="pk_0">PK</label>
                            </div>
                            <div class="form-check form-check-inline small mb-0 schema-check schema-check-ai">
                                <input type="checkbox" class="form-check-input ai-check" id="ai_0">
                                <label class="form-check-label" for="ai_0">AI</label>
                            </div>
                            <input type="text" class="form-control form-control-sm mt-1 enum-values" placeholder="ENUM/SET values (comma separated)" style="display:none;">
                        </div>
                        <div class="schema-cell field-remove-cell"><button type="button" class="btn btn-sm btn-outline-danger remove-field py-0 px-1" data-bs-toggle="tooltip" title="Remove this field row before creating the table."><i class="bi bi-x"></i></button></div>
                    </div>
                    </div>
                </div>
                <button class="btn btn-sm btn-outline-secondary mt-2" id="addFieldBtn" data-bs-toggle="tooltip" title="Add another field row to this new table."><i class="bi bi-plus"></i> Add Field</button>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" data-bs-toggle="tooltip" title="Close without creating a table.">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnCreateTableSubmit" data-bs-toggle="tooltip" title="Create the table in the database and save its schema metadata.">Create Table</button>
            </div>
        </div>
    </div>
</div>
