function NewToast(data)
{
    // toast "id" is based on msg_id, for any persistent/long-lived msg's we will try to reshow them
    // dont bother, if it already exists it is visible, just move on
    d_id='st' + String(data.id)
    if( $('#'+d_id).length !== 0 )
        return
    // make new div, include data.level as background colour, and data.message as toast body
    div='<div id="' + d_id + '"'
    if( data.persistent === true )
        div+=' data-bs-autohide="false"'
    div +=' class="toast hide align-items-center border-0'
    if( data.level == "success" || data.level == "danger" )
        div += ' text-white'
    div += ' bg-' + data.level + '" '
    if( data.level == "success" )
        div += 'data-bs-delay="2000" '
    div += `role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    <font size="1.5em">
                `
    div += data.message
    div += '        </font></div>'
    if( data.cant_close !== true )
    {
        div += '    <button type="button" class="btn-close me-2 m-auto'
        if( data.level === "success" || data.level === "danger" )
                div += ' btn-close-white'
        div += ' " data-bs-dismiss="toast" aria-label="Close"></button>'
    }
    div += `
            </div>
        </div>
        `
    // insert this as the first element in the status_container
    $('#status_container').append(div)

    return d_id
}

// create a bs toast in the status_container
// can reuse any that are hidden, OR, create a new one by appending as needed (so we can have 2+ toasts on screen)
function StatusMsg(st)
{
    el=NewToast(st)
    $('#' + el ).toast("show")
    // clear message only when toast is hidden (either timeout OR user clicks close btn)
    $('#' + el).on( 'hidden.bs.toast', 
        function() { 
            $.ajax( { type: 'POST', url: '/clear_msg/'+st.id, success: function(data) {} } )
        } )
}

// this will make the active jobs badge red with a > 0 value, or navbar colours
// if 0 (effectively hiding it, but leaving the same width)
function SetActiveJobsBadge(num_jobs)
{
    if( num_jobs > 0 ) 
        $('#num_active_jobs').removeClass("invisible")
    else 
        $('#num_active_jobs').addClass("invisible")
    $('#num_active_jobs').html(num_jobs)
}

// this function is called either when we load and PA page and active jobs > 0
// OR, when a new job is created in the F/E and therefore active jobs > 0
// it keeps looking to see if the pa_job_manager has sent a response (via the DB)
// if so, it handles the response(s) with toast()s and updates the active job
// badge in the navbar.   If all jobs are complete it stops calling itself
// after a 1 second timeout
function CheckForJobs()
{
    $.ajax(
        {
            type: 'POST', url: '/check_for_jobs', 
            success: function(data) { 
                data.sts.forEach( 
                    function(el)
                    {
                        StatusMsg(el)
                    }
                )
                SetActiveJobsBadge(data.num_active_jobs)
                if( data.num_active_jobs > 0 )
                {
                    setTimeout( function() { CheckForJobs() }, 1000 );
                }
            }, 
        } )
    return false;
}