<script setup>

const dataStore = useDataStore()

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

<template>
  <UTabs
      :items="items"
  >
    <template #item="{item}">
      <UCard class="mt-5 overflow-y-scroll scroll">
        <div v-if="item.label === 'Projekte'">
          <UDivider
            label="Phasenvorlagen"
          />
        </div>
        <div v-else-if="item.label === 'Dokumente'">
          <UDivider
              label="Tags"
              class="mb-3"
          />
          <InputGroup>
            <UBadge
                v-for="tag in dataStore.ownTenant.tags.documents"
            >
              {{tag}}
            </UBadge>
          </InputGroup>


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

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

<style scoped>

</style>