<script>
 import {
     Toast,
     ToastBody,
     ToastHeader,
 } from 'sveltestrap';

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

<div class="toast-container position-absolute top-0 end-0 p-3">
    {#each $ToastsStore.toasts as toast}
        <Toast>
            <ToastHeader toggle={toast.close} icon={toast.color}>
                {#if toast.title}{toast.title}{:else}Gustus{/if}
            </ToastHeader>
            <ToastBody>
                {toast.msg}
            </ToastBody>
        </Toast>
    {/each}
</div>
