<script setup>

const { isHelpSlideoverOpen } = useDashboard()
const { isDashboardSearchModalOpen } = useUIState()
const { metaSymbol } = useShortcuts()
const user = useSupabaseUser()
const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()
const router = useRouter()
const auth = useAuthStore()

const items = computed(() => [
  [{
    slot: 'account',
    label: '',
    disabled: true
  }],  [/*{
    label: 'Mein Profil',
    icon: 'i-heroicons-user',
    to: `/profiles/show/${profileStore.activeProfile.id}`
  },*/{
    label: 'Passwort ändern',
    icon: 'i-heroicons-shield-check',
    to: `/password-change`
  },{
    label: 'Abmelden',
    icon: 'i-heroicons-arrow-left-on-rectangle',
    click: async () => {
      await auth.logout()

    }
  }]
])
</script>

<template>
  <UDropdown mode="hover" :items="items" :ui="{ width: 'w-full', item: { disabled: 'cursor-text select-text' } }" :popper="{ strategy: 'absolute', placement: 'top' }" class="w-full">
    <template #default="{ open }">
      <UButton color="gray" variant="ghost" class="w-full" :label="auth.user.email" :class="[open && 'bg-gray-50 dark:bg-gray-800']">
<!--        <template #leading>
          <UAvatar :alt="auth.user.email"  size="xs" />
        </template>-->

        <template #trailing>
          <UIcon name="i-heroicons-ellipsis-vertical" class="w-5 h-5 ml-auto" />
        </template>
      </UButton>
    </template>

    <template #account>
      <div class="text-left">
        <p>
          Angemeldet als
        </p>
        <p class="truncate font-medium text-gray-900 dark:text-white">
          {{auth.user.email}}
        </p>
      </div>
    </template>
  </UDropdown>
</template>