<template>
    <v-app-bar color="blue" scroll-behavior="elevate" scroll-threshold="20" :height="100" image="/static/bck-2.webp">
        <!-- <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
        <template v-slot:prepend>
            <v-avatar class="ml-3" size="66" rounded="0">
                <v-img src="/logo.webp" alt="ProNature Logo"></v-img>
            </v-avatar>
        </template>
        <v-app-bar-title>{{ l.playground }}</v-app-bar-title>
        <v-btn to="/manage" icon="mdi-wrench-cog-outline" v-if="roles.editor" v-tooltip="l.workshop"></v-btn>
        <v-dialog max-width="480">
            <template v-slot:activator="{ props }">
                <v-btn icon="mdi-account" variant="text" v-bind="props"></v-btn>
            </template>
            <template v-slot:default="{ isActive }">
                <v-card class="pa-3" :title="user? l.profile : l.signin ">
                    <v-card-text>
                        <Profile v-if="user"></Profile>
                        <Auth v-show="!user" @login-success="isActive.value = false"></Auth>
                    </v-card-text>
                </v-card>
            </template>
        </v-dialog >
    </v-app-bar>
</template>

<script setup>
import { useTheme } from 'vuetify'
import Profile from './User/Profile.vue';
const theme = useTheme()

function toggleTheme () {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
</script>