<template>
  <div class="alerter">
    <div
      v-for="(alert, key) in alerts"
      :key="key"
      :class="'alert alert-dismissible alert-' + alert.type"
      transition="staggered"
      stagger="100"
    >
      <button
        type="button"
        class="close"
        @click="remove(alert)"
      >
        <span aria-hidden="true">&times;</span>
      </button>
      <div v-html="alert.html"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
    .alerter {
        position: fixed;
        top: 3em;
        width: 50vw;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001; // On top of nav-bar
    }

    .alert {
        opacity: 0.9;
        box-shadow: 1px 1px 10px rgba(0, 0, 0, .3);
    }

    .staggered-enter-active,
    .staggered-leave-active {
        opacity: 0;
        transition: all .5s ease;
    }
</style>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  computed: mapState({
    alerts: state => state.alerts.all,
  }),
  methods: {
    ...mapActions('alerts', ['remove']),
  },
};
</script>
