
<script>
    let containerToast = null;

    function onMessageToast(color, defaultDelay) {
        return (message, delay = defaultDelay) => {
            const html = `
                <div class="toast align-items-center text-bg-${color} border-0"
                    style="min-height: 5rem;"
                    role="alert" aria-live="assertive" aria-atomic="true"
                    data-bs-autohide="true" data-bs-delay="${delay}">
                    <div class="d-flex">
                        <div class="toast-body text-light">${message}</div>
                        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                    </div>
                </div>
            `;
            containerToast.insertAdjacentHTML('afterbegin', html)
            const elem = containerToast.querySelector('.toast')
            const item = new bootstrap.Toast(elem)
            elem.addEventListener('hidden.bs.toast', () => elem.remove())
            item.show()
        }
    }

    globalThis.toast = {
        success: onMessageToast('success', 5000),
        error: onMessageToast('danger', 3000),
        danger: onMessageToast('danger', 3000),
        warning: onMessageToast('warning', 5000),
        info: onMessageToast('info', 5000),
        primary: onMessageToast('primary', 5000),
    }
</script>

<div class="toast-container position-fixed top-0 end-0 p-3" bind:this={containerToast}>
</div>