<div class="d-flex justify-content-between align-items-center mb-2">
    <h6 class="small mb-0">Additional WHERE Tabs</h6>
    <button class="btn btn-sm btn-outline-primary" id="btnAddWhereTab"><i class="bi bi-plus"></i> Add</button>
</div>
<div id="whereTabsList" class="list-group small">
    <!-- Dynamically filled by JS -->
</div>
<div id="whereTabsAllNote" class="text-muted small mt-2"></div>
<div id="whereTabPreview" class="mt-2"></div>

<!-- Add/Edit WHERE Tab Modal -->
<div class="modal fade" id="whereTabModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog 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-funnel me-2"></i><span id="whereTabModalTitle">Add WHERE Tab</span></h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close WHERE tab editor"></button>
            </div>
            <div class="modal-body py-2">
                <input type="hidden" id="whereTabEditIndex" value="-1">

                <div class="mb-2">
                    <label class="form-label small mb-1">Tab type</label>
                    <select class="form-select form-select-sm" id="whereTabType">
                        <option value="clause">Single tab — one fixed WHERE clause</option>
                        <option value="dynamic">Auto tabs — one per distinct value of a field</option>
                    </select>
                </div>

                <!-- Single WHERE clause mode -->
                <div id="whereTabClauseMode">
                    <div class="mb-2">
                        <label class="form-label small mb-1">Tab Name</label>
                        <input type="text" class="form-control form-control-sm" id="whereTabName" placeholder="e.g., Active Records">
                    </div>
                    <div class="mb-2">
                        <label class="form-label small mb-1">WHERE Clause</label>
                        <textarea class="form-control form-control-sm" id="whereTabClause" rows="3" placeholder="e.g., status = 'active'"></textarea>
                        <div class="form-text small">Session variables work here: <code>:userid</code>, <code>:session.key</code>, <code>:user.field</code> — e.g. <code>assigned_to = :userid</code> for a “My records” tab.</div>
                    </div>
                </div>

                <!-- Auto-from-field mode -->
                <div id="whereTabDynamicMode" class="d-none">
                    <div class="mb-2">
                        <label class="form-label small mb-1">Field</label>
                        <select class="form-select form-select-sm" id="whereTabField"><option value="">Loading fields…</option></select>
                        <div class="form-text small">The list page builds one tab for each distinct value of this field (plus the “All data” tab) — live from your data, so new values appear automatically.</div>
                    </div>
                </div>

                <div class="form-check small mt-2">
                    <input class="form-check-input" type="checkbox" id="whereTabShowCount">
                    <label class="form-check-label" for="whereTabShowCount">Show record count on each tab</label>
                </div>
                <div class="form-check small mt-1">
                    <input class="form-check-input" type="checkbox" id="whereTabHideEmpty">
                    <label class="form-check-label" for="whereTabHideEmpty">Hide a tab when it has no data</label>
                </div>
                <hr class="my-2">
                <div class="form-check small mt-1">
                    <input class="form-check-input" type="checkbox" id="whereTabShowAll" checked>
                    <label class="form-check-label" for="whereTabShowAll">Show an <strong>“All”</strong> tab (every record) — applies to the whole tab bar</label>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-outline-info" id="btnPreviewWhere"><i class="bi bi-play me-1"></i> Preview</button>
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnSaveWhereTab">Save</button>
            </div>
        </div>
    </div>
</div>
