<AppBar background="bg-transparent" gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
    <svelte:fragment slot="lead"><h1 class="text-3xl">Blackbird Chess</h1></svelte:fragment>
    <p class="badge variant-filled-surface">24e herfstschaaktornooi</p>

    <svelte:fragment slot="trail">
        <button class="btn">
            <i class="icon icon-gear"></i>
            <span>Settings</span>
        </button>
        <button class="btn" on:click={logout}>
            <i class="icon icon-sign-out"></i>
            <span>Logout</span>
        </button>
    </svelte:fragment>
</AppBar>

<script>
    import {sessionstore, globalstore} from "$lib/stores.js";
    import {goto} from "$app/navigation";
    import { AppBar } from '@skeletonlabs/skeleton';

    let sessionvars;
    sessionstore.subscribe(value => {
        sessionvars = value;
    });

    let globalvars;
    globalstore.subscribe(value => {
        globalvars = value;
    });
    function logout() {
        sessionstore.set({});
        globalstore.set({});
        goto('/')
    }


</script>