<script>
	import Button from "$shared/components/button.svelte";
	import {switch_theme} from "$shared/lib/helpers";
</script>

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

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

<main class="container-fluid padding-x-xs padding-x-xxl@xs padding-y-md padding-y-lg@md max-width-sm">
    <slot/>

    <Button on:click={() => switch_theme()}
            text="Switch theme"
            variant="secondary"/>

    <figure id="decoration"
            aria-hidden="true">
        <svg class="color-contrast-higher opacity-10%"
             viewBox="0 0 1920 450"
             fill="none">
            <g stroke="currentColor"
               stroke-width="2">
                <rect x="1286"
                      y="64"
                      width="128"
                      height="128"/>
                <circle cx="1350"
                        cy="128"
                        r="64"/>
                <path d="M1286 64L1414 192"/>
                <circle cx="1478"
                        cy="128"
                        r="64"/>
                <rect x="1414"
                      y="192"
                      width="128"
                      height="128"/>
                <circle cx="1478"
                        cy="256"
                        r="64"/>
                <path d="M1414 192L1542 320"/>
                <circle cx="1606"
                        cy="256"
                        r="64"/>
                <rect x="1542"
                      y="320"
                      width="128"
                      height="128"/>
                <circle cx="1606"
                        cy="384"
                        r="64"/>
                <path d="M1542 320L1670 448"/>
                <rect x="1690"
                      y="192"
                      width="128"
                      height="128"/>
                <circle cx="1754"
                        cy="256"
                        r="64"/>
                <path d="M1690 192L1818 320"/>
                <rect x="1542"
                      y="64"
                      width="128"
                      height="128"/>
                <circle cx="1606"
                        cy="128"
                        r="64"/>
                <path d="M1542 64L1670 192"/>
                <circle cx="1478"
                        r="64"/>
            </g>
        </svg>
    </figure>
</main>
