<script lang="ts">
    import Modal from '../context/Modal.svelte';
    import NavLink from '../components/NavLink.svelte';
    import '../app.scss';
    import Alert from '../context/Alert.svelte';
    import Auth from '../context/Auth.svelte';
    import {QueryClient, QueryClientProvider} from '@sveltestack/svelte-query';
    import {Router} from 'svelte-navigator';
    import Navigation from '../context/Navigation.svelte';
    import Notification from '../context/Notification.svelte';
    import {getContext} from "svelte";
    import type {Writable} from "svelte/store";
    import NavBar from "../components/NavBar.svelte";


</script>

<svelte:head>
    <title>Générateur d'exercices</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="/favicon.png">
</svelte:head>

<Notification>
    <Navigation>
        <Auth>
            <Alert>
                <Modal>

                    <main>
                        <NavBar/>
                        <slot/>
                    </main>
                </Modal>
            </Alert>
        </Auth>
    </Navigation>
</Notification>


<style lang="scss">
  @import '../variables';
  @import "../mixins";

  .links {
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    flex-wrap: wrap;
    height: 30px;

    & li {
      height: 30px;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
  }

  :root {
    --container-padding: 20px;
    --container-width: 1330px;
  }

  :global(body) {
    padding: 0;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell,
    Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    overflow: hidden;
    background-color: $background;
    color: #d9d9d9;
    background: linear-gradient(to bottom left, $background-dark 30%, $background-light);
    width: 100vw;
    height: 100vh;
  }

  main {
    box-sizing: border-box;
    width: 100%;
    padding-left: calc(50% - var(--container-width) / 2);
    padding-right: calc(50% - var(--container-width) / 2);
    height: calc(100vh - var(--navbar-height) - 10px);
    overflow: auto;
    height: 100%;
    overflow-x: hidden;
    a {
      color: red;
    }
  }

  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 30px 0;
    border-bottom: 1px solid $border;
    width: 100%;
    gap: 10px;
    height: 30px;
  }
</style>
