<template>
  <v-menu offset-y left transition="slide-y-transition">
    <template v-slot:activator="{ props }">
      <v-btn icon class="text-none" v-bind="props">
        <v-badge content="6" color="primary" bordered>
          <v-icon>mdi-bell-outline</v-icon>
        </v-badge>
      </v-btn>
    </template>

    <!-- dropdown card -->
    <v-card>
      <v-list three-line dense max-width="400">
        <v-list-subheader class="pa-2 font-weight-bold">Notifications</v-list-subheader>
        <div v-for="(item,index) in items" :key="index">
          <v-divider v-if="index > 0 && index < items.length" inset></v-divider>
          <v-list-item :title="item.title" :subtitle="item.subtitle">
            <template v-slot:prepend>
              <v-avatar :icon="item.icon" size="32" :color="item.color"></v-avatar>
            </template>
            <v-list-item-action class="align-self-center" v-text="item.time">
            </v-list-item-action>
          </v-list-item>
        </div>
      </v-list>

      <div class="text-center py-2">
        <v-btn small>See all</v-btn>
      </div>
    </v-card>
  </v-menu>
</template>

<script lang="ts" setup>
const items = ref([
  {
    title: 'Brunch this weekend?',
    color: 'primary',
    icon: 'mdi-account-circle',
    subtitle: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, repudiandae?',
    time: '3 min'
  },
  {
    title: 'Summer BBQ',
    color: 'success',
    icon: 'mdi-email-outline',
    subtitle: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, repudiandae?',
    time: '3 min'
  },
  {
    title: 'Oui oui',
    color: 'teal lighten-1',
    icon: 'mdi-airplane-landing',
    subtitle: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, repudiandae?',
    time: '4 min'
  },
  {
    title: 'Disk capacity is at maximum',
    color: 'teal accent-3',
    icon: 'mdi-server',
    subtitle: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, repudiandae?',
    time: '3 hr'
  },
  {
    title: 'Recipe to try',
    color: 'blue-grey lighten-2',
    icon: 'mdi-noodles',
    subtitle: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, repudiandae?',
    time: '8 hr'
  }
])
</script>
