<script setup>

const dataStore = useDataStore()
const profileStore = useProfileStore()
const router = useRouter()

const items = [{
  label: 'Profil',
},{
  label: 'Projekte',
  content: 'This is the content shown for Tab1'
}, {
  label: 'E-Mail',
  content: 'And, this is the content for Tab2'
}, {
  label: 'Dokumente'
}]

const colorMode = useColorMode()
const isLight = computed({
  get() {
    return colorMode.value !== 'dark'
  },
  set() {
    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
  }
})


</script>

<template>
  <UDashboardNavbar title="Einstellungen">

  </UDashboardNavbar>
  <UTabs
      :items="items"
      class="h-100 p-5"
  >
    <template #content="{item}">
      <UCard class="mt-5">
        <div v-if="item.label === 'Profil'">

          <USeparator
              class="my-3"
              label="Profil"
          />

          <InputGroup>
            <UButton
                :icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
                color="white"
                variant="outline"
                aria-label="Theme"
                @click="isLight = !isLight"
            />
          </InputGroup>

        </div>
        <div v-else-if="item.label === 'Projekte'">
          <USeparator
            label="Phasenvorlagen"
          />
        </div>
        <div v-else-if="item.label === 'Dokumente'">
          <USeparator
              label="Tags"
              class="mb-3"
          />
          <InputGroup>
            <UBadge
                v-for="tag in profileStore.ownTenant.tags.documents"
            >
              {{tag}}
            </UBadge>
          </InputGroup>


          {{profileStore.ownTenant.tags}}
        </div>
      </UCard>

    </template>
  </UTabs>
</template>

<style scoped>

</style>
