                    <div class="dbm-content-header">
                        <div class="dbm-breadcrumb">
                            <a href="<?php echo Config::get('URL'); ?>database/index">Databases</a>
                            <span class="separator">/</span>
                            <a href="<?php echo Config::get('URL'); ?>database/show/<?php echo urlencode($this->database_name); ?>"><?php echo htmlspecialchars($this->database_name); ?></a>
                            <span class="separator">/</span>
                            <span>New Table</span>
                        </div>
                        <div class="dbm-title">
                            <h1>Create New Table</h1>
                        </div>
                    </div>

                    <div class="dbm-content-body">
                        <div class="dbm-card">
                            <div class="dbm-card-body">
                                <form method="post" action="<?php echo Config::get('URL'); ?>table/create/<?php echo urlencode($this->database_name); ?>" id="create-table-form">
                                    <div class="dbm-form-group">
                                        <label class="dbm-form-label">Table Name</label>
                                        <input type="text" name="table_name" class="dbm-form-input" required pattern="[a-zA-Z0-9_]+" placeholder="my_table">
                                    </div>

                                    <h3 style="color: var(--text-primary); margin: 24px 0 16px;">Columns</h3>

                                    <div id="columns-container">
                                        <div class="column-row" style="display: flex; gap: 10px; margin-bottom: 12px; padding: 16px; background: var(--bg-input); border-radius: var(--radius); flex-wrap: wrap; align-items: center;">
                                            <input type="text" name="columns[0][name]" class="dbm-form-input" placeholder="Column name" required style="width: 150px; max-width: 150px;">
                                            <select name="columns[0][type]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
                                                <option value="INT">INT</option>
                                                <option value="VARCHAR(255)">VARCHAR(255)</option>
                                                <option value="TEXT">TEXT</option>
                                                <option value="DATETIME">DATETIME</option>
                                                <option value="TIMESTAMP">TIMESTAMP</option>
                                                <option value="DECIMAL(10,2)">DECIMAL(10,2)</option>
                                                <option value="BOOLEAN">BOOLEAN</option>
                                            </select>
                                            <select name="columns[0][null]" class="dbm-form-select" style="width: 100px; max-width: 100px;">
                                                <option value="YES">NULL</option>
                                                <option value="NO">NOT NULL</option>
                                            </select>
                                            <select name="columns[0][key]" class="dbm-form-select" style="width: 130px; max-width: 130px;">
                                                <option value="">No Key</option>
                                                <option value="PRI">PRIMARY KEY</option>
                                            </select>
                                            <input type="text" name="columns[0][default]" class="dbm-form-input" placeholder="Default" style="width: 100px; max-width: 100px;">
                                            <select name="columns[0][extra]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
                                                <option value="">None</option>
                                                <option value="auto_increment">AUTO_INCREMENT</option>
                                            </select>
                                            <button type="button" class="dbm-btn dbm-btn-sm dbm-btn-danger remove-column" style="display: none;">Remove</button>
                                        </div>
                                    </div>

                                    <button type="button" id="add-column" class="dbm-btn dbm-btn-secondary" style="margin-top: 8px;">
                                        <i data-lucide="plus"></i>
                                        Add Column
                                    </button>

                                    <div style="margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-color);">
                                        <button type="submit" name="submit_create_table" class="dbm-btn dbm-btn-success">
                                            <i data-lucide="check-circle"></i>
                                            Create Table
                                        </button>
                                        <a href="<?php echo Config::get('URL'); ?>database/show/<?php echo urlencode($this->database_name); ?>" class="dbm-btn dbm-btn-secondary">Cancel</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let columnIndex = 1;

    document.getElementById('add-column').addEventListener('click', function() {
        const container = document.getElementById('columns-container');
        const newRow = document.createElement('div');
        newRow.className = 'column-row';
        newRow.style.cssText = 'display: flex; gap: 10px; margin-bottom: 12px; padding: 16px; background: var(--bg-input); border-radius: var(--radius); flex-wrap: wrap; align-items: center;';
        newRow.innerHTML = `
            <input type="text" name="columns[${columnIndex}][name]" class="dbm-form-input" placeholder="Column name" required style="width: 150px; max-width: 150px;">
            <select name="columns[${columnIndex}][type]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
                <option value="INT">INT</option>
                <option value="VARCHAR(255)">VARCHAR(255)</option>
                <option value="TEXT">TEXT</option>
                <option value="DATETIME">DATETIME</option>
                <option value="TIMESTAMP">TIMESTAMP</option>
                <option value="DECIMAL(10,2)">DECIMAL(10,2)</option>
                <option value="BOOLEAN">BOOLEAN</option>
            </select>
            <select name="columns[${columnIndex}][null]" class="dbm-form-select" style="width: 100px; max-width: 100px;">
                <option value="YES">NULL</option>
                <option value="NO">NOT NULL</option>
            </select>
            <select name="columns[${columnIndex}][key]" class="dbm-form-select" style="width: 130px; max-width: 130px;">
                <option value="">No Key</option>
                <option value="PRI">PRIMARY KEY</option>
            </select>
            <input type="text" name="columns[${columnIndex}][default]" class="dbm-form-input" placeholder="Default" style="width: 100px; max-width: 100px;">
            <select name="columns[${columnIndex}][extra]" class="dbm-form-select" style="width: 140px; max-width: 140px;">
                <option value="">None</option>
                <option value="auto_increment">AUTO_INCREMENT</option>
            </select>
            <button type="button" class="dbm-btn dbm-btn-sm dbm-btn-danger remove-column">Remove</button>
        `;
        container.appendChild(newRow);
        columnIndex++;

        document.querySelectorAll('.remove-column').forEach(btn => btn.style.display = 'inline-flex');
    });

    document.getElementById('columns-container').addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-column')) {
            e.target.closest('.column-row').remove();
            const rows = document.querySelectorAll('.column-row');
            if (rows.length === 1) {
                rows[0].querySelector('.remove-column').style.display = 'none';
            }
        }
    });
});
</script>
