<script setup lang="ts">

import { useRouter } from 'vue-router';
import { useUser } from '@/stores/user';

const userStore = useUser()
const router = useRouter()

async function onLogout() {
	if(await userStore.logout()){
		router.push({name: 'Login'})
	}
}

</script>

<template>
    <nav class="nav justify-content-center border-bottom mb-4 pb-2 d-flex">
		<router-link class="nav-link" :to="{name: 'Home'}">Home</router-link>
        <router-link v-if="userStore.isAdmin" :to="{name: 'Employees/Index'}" class="nav-link">Mitarbeiter</router-link>
        <div class="ms-auto"></div>
        <router-link 
            v-if="userStore.isLoggedIn" 
            class="nav-link" 
            :to="{name: 'Employees/Details', params: {id: 'me'}}"
        >
            Profil
        </router-link>

		<a v-if="userStore.isLoggedIn" href="#" @click="onLogout()" class="nav-link">Logout</a>
		<router-link v-else :to="{name: 'Login'}" class="nav-link">Login</router-link>
	</nav>
</template>

<style scoped>

</style>