<div class="container h-full mx-auto flex justify-center items-center flex-col">
    <h1 class="my-3">Blackbird Chess</h1>

    {#each alertsvar as alert, i}
        <aside class="alert variant-filled-error">
            <!-- Icon -->
            <div><i class="text-2xl icon icon-exclamation-triangle"></i></div>
            <!-- Message -->
            <p class="alert-message">{alert.text}</p>
            <!-- Actions -->
            <div class="alert-actions">
                <i on:click={closeWarning} data-index={i} class="icon icon-close"></i>
            </div>
        </aside>
    {/each}

    <slot />

</div>

<style lang="scss">

</style>

<script lang="js">
    import {alerts} from "$lib/stores.js";

    let alertsvar;
    function closeWarning(e) {
        let index = e.target.dataset.index;
        alerts.update(function (data) {
            data.splice(index, 1)
            return data;
        })
    }
    alerts.subscribe((value) => {
        alertsvar = value;
    });
</script>