<template>
    <PopupTemplate heading="Account" ref="base">
        <div class="account-page">
            <div class="nav">
                <NuxtLink class="nav-link" :class="{ active: tab === 0 }" @click="() => tab = 0">Allgemein</NuxtLink>
                <NuxtLink class="nav-link" :class="{ active: tab === 1 }" @click="() => tab = 1">Einstellungen</NuxtLink>
                <NuxtLink class="nav-link" :class="{ active: tab === 2 }" @click="() => tab = 2" v-if="hasAnyRole(getUser(), ['admin'])">Benutzer</NuxtLink>
                <NuxtLink class="nav-link" :class="{ active: tab === 3 }" @click="() => tab = 3">Logout</NuxtLink>
            </div>
            <div>
                <AccountTab v-if="tab === 0"></AccountTab>
                <SettingsTab v-if="tab === 1"></SettingsTab>
                <UserTab v-if="tab === 2" :goto="(n: number) => tab = n"></UserTab>
                <LogoutTab v-if="tab === 3"></LogoutTab>
                <AddUserTab v-if="tab === 3.5" :goto="(n: number) => tab = n"></AddUserTab>
            </div>
        </div>
    </PopupTemplate>
</template>

<script setup lang="ts">
import UserTab from './account/UserTab.vue';
import SettingsTab from './account/SettingsTab.vue';
import { hasAnyRole } from '~/classes/User';
import LogoutTab from './account/LogoutTab.vue';
import AddUserTab from './account/AddUserTab.vue';

const base = ref();

const tab = ref(0);

function open()
{
    tab.value = 0;
    base.value.open();
}

defineExpose({
    open
})
</script>

<style scoped>
.account-page {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
}
.nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.nav-link {
    padding: 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
}
.nav-link.active {
    background-color: var(--primary-color);
    color: white;
}
</style>