<script setup>
const supabase = useSupabaseClient()
const user = useSupabaseUser()
const route = useRoute()
const tenants = (await supabase.from("tenants").select()).data
const dataStore = useDataStore()
const viewport = useViewport()

console.log("1.")

/*watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})*/

const dev = process.dev





useHead({
  meta: [
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' }
  ],
  htmlAttrs: {
    lang: 'de'
  }
})

useSeoMeta({
  ogSiteName: 'FEDEO',
  twitterCard: 'summary_large_image'
})

</script>

<template>

  <NuxtLayout>
    <NuxtPage/>
  </NuxtLayout>

  <UNotifications/>
  <VitePwaManifest/>


</template>

<style>
/* width */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(0,0,0,0);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(226,232,240);
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #69c350;
}


#logo img{
  height: 15vh;
  width: auto;
}



.documentList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
}

.scrollList {
  overflow-y: scroll;
  height: 85vh;
  margin-top: 1em;
}


  #page {
    width: 98vw;
    height: 95vh;
    margin:1em;
  }

  .listItem {
    padding: .1em;
    border: 1px solid grey;
    border-radius: 15px;
    margin-top: 1em;
  }
  .listItem:hover {
    border: 1px solid #69c350;
  }


  a:hover {
    color: #69c350
  }


</style>