(function ($) {
    
    $.fn.bootstrapToastWrapper = function (content) {
        
        var type = {
            'primary': '#084298',
            'secondary': '#41464b',
            'success': '#0f5132',
            'danger': '#842029',
            'warning': '#664d03',
            'info': '#055160',
            'light': '#636464',
            'dark': '#141619'
        }
        
        var toastContent = "<div class='toast show'> <div class='toast-header'> {{type}} <strong class='me-auto'>{{title}}</strong> <button type='button' class='btn-close' data-bs-dismiss='toast' aria-label='Close'></button> </div> <div class='toast-body'>{{body}}</div> </div>";
        var rect = '<svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="{{type}}"></rect></svg>';
        
        rect = rect.replace('{{type}}', type[content['type']]);
        
        toastContent = toastContent.replace('{{type}}', rect);
        
        
        for(key in content){
            toastContent = toastContent.replace('{{'+key+'}}', content[key] );
        }
        
        var a = $(this).append(toastContent).children("div:last-child");;
        
        if(content.timeout){
            setTimeout(function(){
                $(a).remove();
            }, content.timeout);
        }
        
    }
})(jQuery);