<div class="modal fade" id="keyColumnsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title"><i class="bi bi-key me-2"></i>Select Key Columns</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close key columns" title="Close without changing record keys"></button>
            </div>
            <div class="modal-body py-2" id="keyColumnsBody">
                <!-- dynamically filled with field checkboxes -->
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" title="Cancel key-column changes">Cancel</button>
                <button type="button" class="btn btn-sm btn-primary" id="btnSaveKeyColumns" title="Save the columns that uniquely identify records">Save</button>
            </div>
        </div>
    </div>
</div>
