<div class="modal fade" id="createCustomViewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-info text-white py-2">
                <h6 class="modal-title"><i class="bi bi-eye me-2"></i>Create Custom View</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close custom view"></button>
            </div>
            <div class="modal-body py-2">
                <div class="sqled-view-layout">
                    <div class="sqled-view-main">
                        <div class="mb-2">
                            <label class="form-label small mb-1">View Name</label>
                            <input type="text" class="form-control form-control-sm" id="customViewName" placeholder="e.g., active_customers">
                        </div>
                        <div class="mb-2">
                            <label class="form-label small mb-1">SELECT Statement</label>
                            <textarea class="form-control form-control-sm" id="customViewSQL" rows="6" placeholder="SELECT * FROM customers WHERE status = 'active'"></textarea>
                            <small class="text-muted">Write a valid SQL SELECT. The view is created as <code>CREATE VIEW view_name AS ...</code></small>
                        </div>
                        <div id="viewResult" class="mt-2"></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="btnPreviewCustomView" data-bs-toggle="tooltip" title="Validate the SELECT statement and preview sample result 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 or replacing the view.">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnCreateCustomViewSubmit" data-bs-toggle="tooltip" title="Create or replace this database view and save its SQL definition to project JSON.">Create View</button>
            </div>
        </div>
    </div>
</div>
