<script setup lang="ts">
  import {useLabelEditorStore} from "~/store/labelEditorStore";

  let store = useLabelEditorStore();
</script>

<template>
  <div class="notificationContainer">
    <v-slide-y-reverse-transition
        :group="true"
    >
      <div
          v-for="notificationMessage in store.notificationQueue"
          :key="notificationMessage.id"
      >
        <v-alert
            v-if="notificationMessage.error"
            :closable="true"
            type="error"
        >
          {{ notificationMessage.message }}
        </v-alert>

        <v-alert
            v-else
            :closable="true"
            type="success"
        >
          {{ notificationMessage.message }}
        </v-alert>
      </div>

    </v-slide-y-reverse-transition>
  </div>
</template>

<style scoped>
  .notificationContainer {
    position: fixed;
    bottom: 75px;
    right: 10px;
    display: grid;
    grid-gap: 0.5em;
    width: 300px;
    z-index: 99;
  }
</style>