<script>
 import { ToastsStore } from '../stores/toasts';
</script>

<div class="toast-container position-absolute top-0 end-0 p-3">
    {#each $ToastsStore.toasts as toast}
        <div class="toast show" role="alert">
            <div class="toast-header">
                <div class="bg-{toast.color} rounded me-2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <strong>{#if toast.title}{toast.title}{:else}Questionnaire{/if}</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                {toast.msg}
            </div>
        </div>
    {/each}
</div>
