<script lang="ts">
    import {locals} from "../../ts/stores.js";
    import Message from "./Message.svelte";

    export let flashed = $locals.flash;
    const displayedCategories = [
        'success',
        'info',
        'warning',
        'error',
        'error-alert',
    ];
</script>

<style lang="scss">
    .messages :global(.message:not(:last-child)) {
        margin-bottom: 8px;
    }
</style>

<div class="messages">
    {#if flashed}
        {#each Object.entries(flashed).filter(entry => displayedCategories.indexOf(entry[0]) >= 0) as [key, bag], i}
            {#each bag as content}
                <Message type={key} content={content}/>
            {/each}
        {/each}
    {/if}
</div>
