<script>
    import '../app.pcss';
    import {Drawer, initializeStores, Modal, ProgressRadial, Toast} from '@skeletonlabs/skeleton';
    import {loading} from '$lib/stores';
    import {AppSettings} from '$lib/components';

    initializeStores();
</script>

<div class="relative h-dvh">
    <Modal />
    <Toast />
    <Drawer bgDrawer="bg-surface-500/90" width="w-6/12" height="h-dvh" position="left">
        <div class="h-full p-4">
            <AppSettings />
        </div>
    </Drawer>
    {#if $loading}
        <div class="fixed bottom-3 right-3 w-8 h-8">
            <ProgressRadial width="w-8" height="h-8" stroke={120} strokeLinecap="butt"  />
        </div>
    {/if}
    <slot />
</div>