<div class="modal fade" id="joinModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm 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-link-45deg me-2"></i><span id="joinModalTitle">Create JOIN</span></h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close create JOIN"></button>
            </div>
            <div class="modal-body py-2">
                <input type="hidden" id="joinEditId">
                <input type="hidden" id="joinLeftTable">
                <input type="hidden" id="joinLeftField">
                <input type="hidden" id="joinRightTable">
                <input type="hidden" id="joinRightField">

                <p class="small mb-2">
                    <span id="joinInfoLeft"></span> &#8594; <span id="joinInfoRight"></span>
                </p>

                <label class="form-label small mb-1">Join Type</label>
                <select class="form-select form-select-sm" id="joinTypeSelect">
                    <option value="INNER">INNER JOIN</option>
                    <option value="LEFT">LEFT JOIN</option>
                    <option value="RIGHT">RIGHT JOIN</option>
                    <option value="FULL">FULL OUTER JOIN</option>
                </select>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-sm btn-outline-danger d-none me-auto" id="btnDeleteJoin"><i class="bi bi-trash me-1"></i>Delete</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="btnSaveJoin">Save Join</button>
            </div>
        </div>
    </div>
</div>
