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

  <UDashboardPanelContent>
    <div class="mb-5">
      <UDashboardCard
          title="Einnahmen und Ausgaben(netto)"
          class="mt-3"
      >
        <display-income-and-expenditure/>
      </UDashboardCard>
    </div>
    <UPageGrid>
      <UDashboardCard
          title="Buchhaltung"
          v-if="profileStore.ownTenant.features.accounting"
      >
        <display-open-balances/>
      </UDashboardCard>
      <UDashboardCard
          title="Bank"
          v-if="profileStore.ownTenant.features.accounting"
      >
        <display-bankaccounts/>
      </UDashboardCard>
      <UDashboardCard
          title="Projekte"
      >
        <display-projects-in-phases/>
      </UDashboardCard>
      <UDashboardCard
          title="Anwesenheiten"
      >
        <display-present-profiles/>
      </UDashboardCard>
      <UDashboardCard
      >
        <display-running-time/>
      </UDashboardCard>
      <UDashboardCard
          title="Aufgaben"
      >
        <display-open-tasks/>
      </UDashboardCard>
    </UPageGrid>
  </UDashboardPanelContent>
</template>

<script setup>

import DisplayPresentProfiles from "~/components/noAutoLoad/displayPresentProfiles.vue";

definePageMeta({
  middleware: ["auth","redirect-to-mobile-index"]
})

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

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 supabase = useSupabaseClient()

const user = useSupabaseUser()

const unreadMessages = ref(false)
const setup = async () => {
  unreadMessages.value = (await supabase.from("notifications").select("id,read").eq("read",false)).data.length > 0
}

setup()
</script>

<style scoped>

</style>