<template>
  <UDashboardPage>
    <UDashboardPanel grow>
      <UDashboardNavbar title="Home">
        <template #right>
          <UTooltip text="Notifications" :shortcuts="['N']">
            <UButton color="gray" variant="ghost" square @click="isNotificationsSlideoverOpen = true">
              <UChip color="red" inset>
                <UIcon name="i-heroicons-bell" class="w-5 h-5" />
              </UChip>
            </UButton>
          </UTooltip>

<!--          <UDropdown :items="items">
            <UButton icon="i-heroicons-plus" size="md" class="ml-1.5 rounded-full" />
          </UDropdown>-->
        </template>
      </UDashboardNavbar>

<!--      <UDashboardToolbar>
        <template #left>
          &lt;!&ndash; ~/components/home/HomeDateRangePicker.vue &ndash;&gt;
&lt;!&ndash;          <HomeDateRangePicker v-model="range" class="-ml-2.5" />&ndash;&gt;

          &lt;!&ndash; ~/components/home/HomePeriodSelect.vue &ndash;&gt;
&lt;!&ndash;          <HomePeriodSelect v-model="period" :range="range" />&ndash;&gt;
        </template>
      </UDashboardToolbar>-->

      <UDashboardPanelContent>
        <UDashboardCard
        >
          <p v-for="time in dataStore.getStartedWorkingTimes()"><UIcon name="i-heroicons-check"/>{{dataStore.getProfileById(time.profile).fullName}}</p>
        </UDashboardCard>

      </UDashboardPanelContent>
    </UDashboardPanel>
  </UDashboardPage>
</template>

<script setup>
definePageMeta({
  middleware: "auth"
})

const dataStore = useDataStore()

const { isNotificationsSlideoverOpen } = useDashboard()
const items = [[{
  label: 'Aufgabe',
  icon: 'i-heroicons-paper-airplane',
  to: '/tasks/create'
}, {
  label: 'Kunde',
  icon: 'i-heroicons-user-plus',
  to: '/customers/create'
}]]


const {getOpenTasksCount} = useDataStore()
const openTasks = getOpenTasksCount

const supabase = useSupabaseClient()

const user = useSupabaseUser()

</script>

<style scoped>
/*.cardHolder {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.card{
  width: 22vw;
  height: 40vh;
  border: 1px solid white
}*/
</style>