<div class="row g-2">
    <div class="col-12">
        <h6 class="small">Select fields</h6>
        <table class="table table-sm table-bordered small" id="designerGrid">
            <thead class="table-light">
                <tr>
                    <th style="width:30px;">✔</th>
                    <th>Field</th>
                    <th>Alias</th>
                    <th>Sort Type</th>
                    <th>Sort Order</th>
                    <th>Group By</th>
                    <th>Criteria (WHERE)</th>
                    <th style="width:30px;"></th>
                </tr>
            </thead>
            <tbody id="designerRows">
                <!-- dynamically filled by JS -->
            </tbody>
        </table>
        <div class="d-flex flex-wrap align-items-center gap-3 mt-1">
            <button class="btn btn-sm btn-outline-secondary" id="btnAddFieldRow" title="Add a column or a custom SQL expression, e.g. CONCAT(first,' ',last)"><i class="bi bi-plus"></i> Add field / expression</button>
            <div class="d-flex flex-wrap align-items-center gap-3 ms-auto">
                <div class="d-inline-flex align-items-center gap-1" title="DISTINCT — return only unique rows. Removes duplicate combinations of the selected columns (SELECT DISTINCT …). Handy when a join or a partial column set repeats rows.">
                    <div class="form-check form-switch m-0">
                        <input class="form-check-input" type="checkbox" id="queryDistinct">
                        <label class="form-check-label small" for="queryDistinct">DISTINCT</label>
                    </div>
                    <i class="bi bi-info-circle small text-muted" aria-hidden="true"></i>
                </div>
                <label class="small m-0 d-inline-flex align-items-center gap-1" title="Limit — cap how many rows the query returns (adds LIMIT n). 0 means no limit. Saved with the query and also bounds the generated app's list.">Limit
                    <input type="number" class="form-control form-control-sm" id="queryLimit" min="0" placeholder="0" style="width:72px;">
                    <i class="bi bi-info-circle small text-muted" aria-hidden="true"></i>
                </label>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mt-2">
            <h6 class="small mb-0">Table Diagram</h6>
            <div id="joinTip" class="alert alert-info alert-dismissible fade show small py-1 px-2 mb-0 d-none" role="alert" style="font-size:0.75rem;">
                <i class="bi bi-info-circle me-1"></i> Drag a field between tables to <strong>JOIN</strong>. Double‑click an arrow to <strong>edit or delete</strong> it.
                <button type="button" class="btn-close btn-close-sm" data-bs-dismiss="alert" aria-label="Close" style="font-size:0.6rem;"></button>
            </div>
        </div>

        <?php include __DIR__ . '/diagram_pane.php'; ?>
    </div>
</div>