<script setup>
import ReloadPWA from './components/ReloadPWA.vue';
import {useI18n} from 'vue-i18n';
import NavMessage from './components/message/NavMessage.vue';

const {t} = useI18n({useScope: 'local'});
</script>

<script>
export default{
    components: {NavMessage}
}
</script>


<template>
    <div id="appflex">
        <div id="page">
            <div class="action-bar">
                <router-view name="ActionBar"></router-view>
            </div>
            <main id="content">
                <ReloadPWA/>
                <router-view></router-view>
            </main>
        </div>
        <div id="sidebar" class="sidebar">
            <router-view name="Sidebar"></router-view>
        
            <div id="menu">
                <NavMessage/>
                <router-view name="navMessage"></router-view>
            </div> 
        </div>
    </div>
    <header class="navbar">
        <router-link :to="{name: 'Apps'}" class="home-link">
            <img id="main-logo" alt="" src="./assets/logo.svg"/>
            <span id="site-name">{{ t('home.apps') }}</span>
        </router-link>

        <div class="nav-menu">
            <details>
                <summary>
                <span class="connect">👥 Connexion</span>
                </summary>
                <ul>
                    <li class="nav-connect"><a href="#">Compte</a></li>
                    <li class="nav-connect"><a href="#">Tableau de bord</a></li>
                    <li class="nav-connect"><a href="#">Déconnexion</a></li>
                </ul>  
            </details>
        </div>    

        <div class="links">
            <router-view name="Links"></router-view>
            <select v-model="$i18n.locale" @change="$i18n.loadMessages()">
                <option value="de">Deutsch</option>
                <option value="en">English</option>
                <option value="fr">Français</option>
                <option value="nl">Nederlands</option>
            </select>
        </div> 
    </header>
    <footer class="footer">
    </footer>

</template>

<style lang="less">
@import './assets/css/wrapper.less';
@import './assets/css/common.less';
@import './assets/css/input.less';
@import './assets/css/sidebar.less';
@import './assets/css/print.less';
@import './assets/css/mobile.less';
@import './assets/css/config.less';
@import './assets/css/theme-print.less';
@import './assets/css/theme-light.less';
@import './assets/css/theme-light-hc.less';
@import './assets/css/theme-dark.less';
@import './assets/css/theme-dark-hc.less';
</style>

<i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>
