<template>
  <!--Alert Bar-->
  <div v-if="noAlert">
    <div class="alert" :class="alert.color" role="alert">
      {{ alert.text }}
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      noAlert: true,
      alert: ""
    };
  },
  created() {
    this.getAlert();
  },
  methods: {
    getAlert() {
      this.noAlert = false;
      axios.get("https://api.gabenparadise.com/api/alert").then(response => {
        console.log(response);
        if (response.status === 200) {
          if (
            response.data !== undefined ||
            response.data !== null ||
            response.data !== ""
          ) {
            this.alert = response.data;
            this.noAlert = true;
          }
        }
      });
    }
  }
};
</script>
