<script>
    import { onMount } from 'svelte';
    import { loadTranslation } from './translations.svelte.js';
    import { user } from './user.svelte.js';
    import { Router, Route } from 'svelte-tiny-router';
    import About    from "./routes/About.svelte";
    import Footer   from "./Components/Footer.svelte";
    import Home     from "./routes/Home.svelte";
    import Login    from "./Components/Login.svelte";
    import Menu     from "./Components/Menu.svelte";
    import User     from "./routes/User.svelte";


    let translations_ready = false;
    onMount(async () => {
        await loadTranslation('de','Login');
        translations_ready = true;
    });

</script>

{#if translations_ready }
    {#if user.name }
        <!-- https://github.com/notnotsamuel/svelte-tiny-router -->
        <Router>
            <Menu />
            <Route path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/user/:id" component={User} />
            <Route>
                <p>Page not found</p>
            </Route>
        </Router>
    {:else}
        <Login />
    {/if}
    <Footer />
{:else}
    <p>Loading translations...</p>
{/if}

