<template>
    <div class="grid justify-items-stretch">
        <div v-if="$page.props.flash.success" class="text-white px-6 py-4 border-0 w-11/12 mt-4  justify-self-center rounded relative mb-4 bg-green-500">
            <span class="text-xl inline-block mr-5 align-middle">
                <i class="fad fa-check-circle"></i>
            </span>
            <span class="inline-block align-middle mr-8">
                {{ $page.props.flash.success }}
            </span>
            <button class="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none" v-on:click="closeAlert()">
                <span>×</span>
            </button>
        </div>

        <div v-if="$page.props.flash.error" class="text-white px-6 py-4 border-0 w-11/12 mt-4  justify-self-center rounded relative mb-4 bg-red-500">
            <span class="text-xl inline-block mr-5 align-middle">
                <i class="fad fa-exclamation-triangle"></i>
            </span>
            <span class="inline-block align-middle mr-8">
                {{ $page.props.flash.error }}
            </span>
            <button class="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none" v-on:click="closeAlert()">
                <span>×</span>
            </button>
        </div>

  </div>
</template>

<script>
export default {
  name: "emerald-alert",
  data() {
    return {
      alertOpen: true
    }
  },
  methods: {
    closeAlert: function(){
      this.$page.props.flash.error = null;
      this.$page.props.flash.success = null;
    }
  }
}
</script>
