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

const {t} = useI18n({useScope: 'local'});
</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">
                <details>
        <summary>
            <span>👤 {{ t('menu.contact') }}</span>
        </summary>
        <ul>
            <li><router-link to="/profil">📝 {{ t('menu.profile') }}</router-link></li>
            <li><router-link to="">🗒️ {{ t('menu.contacts list') }}</router-link></li>
        </ul>
    </details>

    <details>
        <summary>
            <span>💬 ✉️ {{ t('menu.messages') }}</span>
        </summary>
        <ul>
            <li><router-link to="/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
            <li><router-link to="/chat">💬 {{ t('menu.chat') }}</router-link></li>
            <li><router-link to="">🎥 {{ t('menu.video conferencing') }}</router-link></li>
        </ul>  
    </details> 
            </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">👥 {{ t('home.connection') }}</span>
                </summary>
                <ul>
                    <li><router-link to="/">{{ t('home.account') }}</router-link></li>
                    <li><router-link to="/">{{ t('home.dashboard') }}</router-link></li>
                    <li><router-link to="/">{{ t('home.disconnect') }}</router-link></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"/>
