<script>
import { logout, user } from '../user.svelte.js';
import { onMount } from 'svelte';
import { useTinyRouter } from 'svelte-tiny-router';
import { t } from '../translations.svelte.js';

const router = useTinyRouter();

const modules = $state([]);

async function fetchModules(){
    const url = `${location.protocol}//${location.host.replace('5173','8080')}/legacy/modules`;
    const resp = await fetch(url,{credentials:'include'});
    if (resp.ok){
        const arr = await resp.json();
        for (let entry of arr) {
            let name = t('module.'+entry.module);
            if (name) modules.push({name:name,url:entry.url});
        }
    } else {
        console.log('error');
    }
}
onMount(fetchModules);
</script>

<style>
    nav a{
        padding: 3px;
    }
</style>

<nav>
    <a onclick={() => router.navigate('/user')}>{t('users')}</a>
    <a onclick={() => router.navigate('/document')}>{t('documents')}</a>
    <a onclick={() => router.navigate('/project')}>{t('projects')}</a>
    <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('tutorial')}</a>
    {#each modules as module,i}<a href={module.url}>{module.name}</a>{/each}
    {#if user.name }
    <a onclick={logout}>{t('logout')}</a>
    {/if}
</nav>