<div id="info-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99999;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); min-width: 400px;">
        <p id="info-modal-paragraph"></p>
        <div class="text-end">
            <button type="button" class="btn btn-secondary ml-2" id="hide-info-modal">OK</button>
        </div>
    </div>
</div>

<div id="confirm-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99999;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); min-width: 400px;">
        <p id="confirm-modal-paragraph"></p>
        <div class="text-end mt-3">
            <button type="button" class="btn btn-secondary me-2" id="confirm-modal-cancel">{{ text_cancel }}</button>
            <button type="button" class="btn btn-primary" id="confirm-modal-yes">{{ text_yes }}</button>
        </div>
    </div>
</div>

<script>
    function showInfoModal(text) {
        document.getElementById('info-modal-paragraph').innerHTML = text;
        document.getElementById('info-modal').style.display = 'block';
    }
    function showConfirmModal(message, onConfirm) {
        document.getElementById('confirm-modal-paragraph').textContent = message;
        document.getElementById('confirm-modal').style.display = 'block';
        var cancelBtn = document.getElementById('confirm-modal-cancel');
        var yesBtn = document.getElementById('confirm-modal-yes');
        var handler = function() {
            document.getElementById('confirm-modal').style.display = 'none';
            cancelBtn.removeEventListener('click', handler);
            yesBtn.removeEventListener('click', handler);
        };
        cancelBtn.onclick = handler;
        yesBtn.onclick = function() {
            handler();
            if (typeof onConfirm === 'function') onConfirm();
        };
    }
    $(document).ready(function() {
        document.getElementById('hide-info-modal').addEventListener('click', function () {
            document.getElementById('info-modal').style.display = 'none';
        });
    });
</script>