<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useTheme } from 'vuetify';
import routesLayout from './plugins/routesLayout';
import { useRoute } from 'vue-router';

const theme = useTheme();
const route = useRoute();
const showDrawer = ref(false);

function changeTheme() {
    theme.toggle();
    localStorage.setItem("theme", theme.name.value);
}

onMounted(() => {
    theme.change(localStorage.getItem("theme") || "light");
});
</script>

<template>
  <v-app>
    <v-app-bar image="./appBarIcon.png">
      <template v-slot:image>
        <v-img
          :gradient="theme.name.value === 'dark' ? 'to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)' : 'to top, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)'"
        />
      </template>
      <template v-slot:prepend>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </template>
      
      <v-app-bar-title class="title">
          Judoteam - Stadtlohn
      </v-app-bar-title>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
      <v-btn icon="mdi-brightness-6" @click="changeTheme()"></v-btn>
    </v-app-bar>

    <v-main>
      <router-view></router-view>
    </v-main>
  </v-app>
</template>

<style scoped></style>