<script>
	import BlowoutToolbelt from "$shared/components/blowout-toolbelt.svelte";
    import {end_session, get_session_data} from "$shared/lib/session";
    import {replace} from "svelte-spa-router";

	const session = get_session_data();
</script>

<style>
    #decoration {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
    }

    #decoration svg {
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 134%;
        min-width: 1280px;
        max-width: 1920px;
        height: auto;
    }
</style>
<BlowoutToolbelt/>
<main class="container max-width-xl padding-x-xs padding-x-xxl@xs padding-y-md padding-y-lg@md">
    <div class="z-index-2 position-relative">
        <slot/>
    </div>

    <div class="flex flex-row gap-xs position-fixed left-0 top-0 margin-md z-index-2">
        <span on:click={async () => {
            if (confirm("Are you sure?")) await end_session(() => {
                replace("/login");
            })
        }} class="btn btn--sm">
            Logout
        </span>
    </div>

    <figure id="decoration"
            class="z-index-1"
            aria-hidden="true">
        <svg class="color-contrast-higher opacity-10%"
             viewBox="0 0 1920 450"
             fill="none">
            <g stroke="currentColor"
               stroke-width="2"
               stroke-linejoin="round"
               stroke-linecap="round">
                <path d="M1449 94.9993V3L1354 48.9995L1259 3V94.9993L1354 140.999L1449 94.9993Z"/>
                <path d="M1639 94.9993V3L1544 48.9995L1449 3V94.9993L1544 140.999L1639 94.9993Z"/>
                <path d="M1354 49.0002V141"/>
                <path d="M1544 49.0002V141"/>
                <path d="M1449 94.9995L1544 140.999L1449 186.999L1354 140.999L1449 94.9995Z"/>
                <path d="M1544 141V232.999L1449 278.999L1354 232.999V141"/>
                <path d="M1449 187V279"/>
                <path d="M1544 264L1639 310L1544 355.999L1449 310L1544 264Z"/>
                <path d="M1639 310V402L1544 447.999L1449 402V310"/>
                <path d="M1544 356.001V448"/>
                <path d="M1639 94.9995L1734 140.999L1639 186.999L1544 140.999L1639 94.9995Z"/>
                <path d="M1734 141V232.999L1639 278.999L1544 232.999V141"/>
                <path d="M1639 187V279"/>
            </g>
        </svg>
    </figure>
</main>
