<div class="modal fade" id="createSqlViewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-secondary text-white py-2">
                <h6 class="modal-title"><i class="bi bi-file-code me-2"></i>Create SQL View</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close SQL view"></button>
            </div>
            <div class="modal-body py-2">
                <div class="sqled-view-layout">
                    <div class="sqled-view-main">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <label class="form-label small mb-0 text-nowrap">View Name</label>
                            <input type="text" class="form-control form-control-sm" id="sqlViewName" placeholder="e.g., customer_orders">
                        </div>
                        <div>
                            <label class="form-label small mb-1">SQL Code (SELECT statement)</label>
                            <textarea class="form-control form-control-sm" id="sqlViewCode" rows="7" placeholder="SELECT c.name, o.total FROM customers c JOIN orders o ON c.id = o.customer_id"></textarea>
                            <small class="text-muted">Enter the SELECT statement that defines the view.</small>
                        </div>
                        <div id="sqlPreviewResult" class="mt-3" style="max-height: 260px; overflow-y: auto;"></div>
                    </div>
                    <aside class="sqled-schema" aria-label="Schema explorer">
                        <div class="sqled-schema-head"><i class="bi bi-diagram-3-fill"></i> Schema
                            <input type="search" class="sqled-schema-search" placeholder="Filter tables / columns…">
                        </div>
                        <div class="sqled-schema-list"></div>
                        <div class="sqled-schema-foot">Click a table or column to insert it · the <i class="bi bi-asterisk"></i> button drops in <code>SELECT * FROM …</code></div>
                    </aside>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-outline-info me-auto" id="btnPreviewSqlView" data-bs-toggle="tooltip" title="Validate the SQL and preview up to ten rows before creating the view."><i class="bi bi-play me-1"></i> Preview</button>
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" data-bs-toggle="tooltip" title="Close without creating the SQL view.">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnCreateSqlViewSubmit" data-bs-toggle="tooltip" title="Create a new database view and save its SQL definition to project JSON.">Create View</button>
            </div>
        </div>
    </div>
</div>
