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

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

    {#if globalvars.server.url == ''}
        <Server on:message={showMessage} bind:globals={globalvars}/>
    {:else}
        <Login on:message={showMessage} bind:globals={globalvars}/>
    {/if}
</div>

<style lang="scss">

</style>

<script lang="js">
    import { globals } from "../../../stores.js";
    import Login from './Login.svelte'
    import Server  from './Server.svelte'

    let globalvars;

    let message = {
        visible: false,
        text: '',
        class: 'error'
    };

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

    function closeWarning() {
        message.visible = false;
    }

    function showMessage(error) {
        console.log(error);
        message.text = error.detail.text;
        message.class = 'error'
        message.visible = true;
    }
</script>