<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}

    <form name="login-server" class="flex flex-col">
        <label class="label my-3">
            <span>Username:</span>
            <input type="email" name="email" id="login-email" class="input" bind:value={email}>
        </label>
        <label class="label my-3">
            <span>Password:</span>
            <input type="password" name="password" id="login-password" class="input" bind:value={email}>
        </label>
        <button type="button" id="login-server-submit" class="btn variant-filled-primary my-3" on:click={handleLogin}>Submit</button>
    </form>
</div>

<style lang="scss">

</style>

<script lang="js">
    import { urls, server } from "../../stores.js";
    import { goto } from '$app/navigation';
    import { onMount } from 'svelte';
    let message = {
        visible: false,
        text: '',
        class: 'error'
    };
    var email = '';
    var password = '';
    var serverurl

    server.subscribe(value => {
        serverurl = value;
    });
    onMount(async () => {
        if(serverurl == null) {
            goto('/')
        }
    });

    function handleLogin() {
        unavailableServer('To be implemented')
    }

    function unavailableServer(error) {
        console.log(error);
        message.text = error;
        message.class = 'error'
        message.visible = true;
    }

    function closeWarning() {
        message.visible = false;
    }
</script>