{{--
    Toast container + the global emiToast() helper.

    Replaces the window.alert() calls the AJAX handlers used to make. Those
    blocked the page and, in one case, printed the account's app password.

    Usage:
      emiToast('3 new emails received');                       // info
      emiToast('Saved', { type: 'success' });
      emiToast('Could not reach the mail server', {
          type: 'error', title: 'Sync failed', timeout: 8000
      });
      emiToast('...', { timeout: 0 })                          // stays until dismissed
--}}
<div class="emi-toasts" id="emiToasts" role="status" aria-live="polite" aria-atomic="false"></div>

<script>
    (function() {
        var ICONS = {
            success: 'bi-check-circle-fill',
            error: 'bi-exclamation-octagon-fill',
            warn: 'bi-exclamation-triangle-fill',
            info: 'bi-info-circle-fill'
        };

        function dismiss(el) {
            if (!el || el.dataset.leaving) return;
            el.dataset.leaving = '1';
            el.classList.remove('is-in');
            setTimeout(function() {
                if (el.parentNode) el.parentNode.removeChild(el);
            }, 220);
        }

        /**
         * message  — the text to show.
         * options  — optional: type ('success' | 'error' | 'warn' | 'info'),
         *            title, and timeout in ms. A timeout of 0 keeps the toast
         *            up until it is dismissed by hand.
         */
        window.emiToast = function(message, options) {
            options = options || {};
            var host = document.getElementById('emiToasts');
            if (!host) return;

            var type = ICONS[options.type] ? options.type : 'info';
            var timeout = options.timeout === undefined ? 4500 : options.timeout;

            var toast = document.createElement('div');
            toast.className = 'emi-toast emi-toast--' + type;

            var icon = document.createElement('i');
            icon.className = 'bi ' + ICONS[type];
            toast.appendChild(icon);

            var body = document.createElement('div');
            body.className = 'emi-toast__body';
            if (options.title) {
                var title = document.createElement('span');
                title.className = 'emi-toast__title';
                title.textContent = options.title;
                body.appendChild(title);
            }
            // textContent, not innerHTML — messages can carry server text.
            body.appendChild(document.createTextNode(message));
            toast.appendChild(body);

            var close = document.createElement('button');
            close.type = 'button';
            close.className = 'emi-toast__close';
            close.setAttribute('aria-label', 'Dismiss');
            close.innerHTML = '&times;';
            close.addEventListener('click', function() {
                dismiss(toast);
            });
            toast.appendChild(close);

            host.appendChild(toast);
            requestAnimationFrame(function() {
                toast.classList.add('is-in');
            });

            if (timeout > 0) setTimeout(function() {
                dismiss(toast);
            }, timeout);

            return toast;
        };
    })();
</script>