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

    {#if typeof globalvars.user == 'undefined' }
        {#each alertsvar as alert, i}
            <aside class="alert {alert.class} mb-3">
                <!-- 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}
    {/if}
    <div class="card variant-ringed p-4 w-50 text-token space-y-4">
        <slot />
    </div>

</div>

<style lang="scss">
  .alert {
    &.error {
      @apply variant-filled-error;
    }
    &.warning {
      @apply variant-filled-warning;
    }
    &.success {
      @apply variant-filled-success;
    }
  }
</style>

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

    let alertsvar;
    let globalvars;

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

    globals.subscribe(value => {
        globalvars = value;
    });
</script>