<template>
  <v-app-bar height="64" color="primary" scroll-behavior="elevate" flat>
    <div class="max-md:px-5 md:px-12 flex flex-grow-1 items-center">
      <router-link :to="{ name: 'dashboard' }" class="flex gap-1 ms-0.5">
        <img src="/favicon.png" alt="logo" width="27" height="24" class="icon-filter" />
        <h2 class="ml-2 text-lg font-500">{{ props.title ?? "Solarpass" }}</h2>
      </router-link>

      <v-spacer />

      <div class="me-2">
        <v-btn icon size="small" variant="text" @click="openNotify = !openNotify">
          <v-badge v-if="notify.total > 0" color="error" :content="notify.total">
            <v-icon icon="mdi-bell" />
          </v-badge>

          <v-icon v-else icon="mdi-bell" />
        </v-btn>
      </div>

      <div>
        <user-menu />
      </div>
    </div>

    <template v-if="slots.extension" #extension>
      <slot name="extension" />
    </template>
  </v-app-bar>

  <NotificationList v-model:open="openNotify" />
</template>

<script setup lang="ts">
import NotificationList from "@/components/NotificationList.vue"
import UserMenu from "@/components/UserMenu.vue"
import { useNotifications } from "@/stores/notifications"
import { ref, useSlots } from "vue"

const notify = useNotifications()

const slots = useSlots()
const props = defineProps<{ title?: String }>()

const openNotify = ref(false)
</script>

<style scoped>
.icon-filter {
  filter: invert(100%) sepia(100%) saturate(14%) hue-rotate(212deg) brightness(104%) contrast(104%);
}
</style>
