<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
const tab = ref("general");
const route = useRoute();
</script>

<template>
    <l-page>
        <l-card>
            <q-splitter unit="px" :model-value="120">
                <template #before>
                    <q-tabs v-model="tab" vertical active-color="primary">
                        <q-route-tab name="general" icon="sym_o_info" :label="$t('General')" to="/User/setting" exact />
                        <q-route-tab name="information" icon="sym_o_info" :label="$t('Information')"
                            to="/User/setting/information" exact />
                        <q-route-tab name="password" icon="sym_o_password" :label="$t('Password')"
                            to="/User/setting/password" exact />
                        <q-route-tab name="style" icon="sym_o_style" :label="$t('Style')" to="/User/setting/style"
                            exact />
                        <q-route-tab name="2fa" icon="sym_o_key" :label="$t('2FA')" to="/User/setting/two-factor-auth"
                            exact />
                        <q-route-tab name="bio" icon="sym_o_fingerprint" :label="$t('Bio')" to="/User/setting/bio-auth"
                            exact />
                        <q-route-tab name="openid" icon="sym_o_key" :label="$t('Open ID')" to="/User/setting/open_id"
                            exact />
                        <q-route-tab name="fav" icon="sym_o_favorite" :label="$t('Favorite')"
                            to="/User/setting/favorite" exact />

                        <q-route-tab name="menu" icon="sym_o_menu" :label="$t('Menu')" to="/User/setting/menu" exact />
                        <q-route-tab name="sessions" icon="sym_o_devices" :label="$t('Sessions')"
                            to="/User/setting/sessions" exact />
                    </q-tabs>
                </template>

                <template #after>
                    <NuxtPage :key="route.path"></NuxtPage>

                </template>
            </q-splitter>
        </l-card>
    </l-page>
</template>
