<template>
  <div class="home">
    <section class="hero">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            Welcome to the Animal Rescue League
          </h1>
          <h2 class="subtitle">
            Make sure you check out the upcoming events below:
          </h2>
          <div class="button-block">
            <button class="button is-xl is-dark" v-if="dataReady">{{date}}</button>
          </div>
        </div>
        <!-- <h1 >{{ date }}</h1> -->
        <h1 v-if="dataReady">{{ date }}</h1>
      </div>
    </section>
    <!-- <img class="blurify" src="https://cdn.auth0.com/blog/vue-meetup/event-banner.png"> -->
  </div>
</template>
<script>
import moment from 'moment'
export default {
  name: 'home',
  // components: {},
  created() {
    // console.log(this);
    // console.log(this.$moment().format("HH:mm:ss"));
    // this.date = moment().format("HH:mm:ss");
  },
  data: function() {
    return {
      date: '',
      dd: '',
      ddd: '',
      dataReady: false
    }
  },
  methods: {
    async logger () {
      console.log("a string");
      this.dd = "a first string";
    },
    getTime () {
      console.log("getting time");
      return moment().format("HH:mm:ss");
    },
  },
  mounted() {
    console.log("a second string");
    // await this.logger();
    setInterval(() => {
      this.date = this.getTime(), 1000
  });
    this.dataReady = true;
  }
}
</script>
<style lang="scss" scoped>
.hero {
  text-align: center;
  background-image: url('https://cdn.auth0.com/blog/vue-meetup/event-banner.png');
  background-image: url('https://face4pets.files.wordpress.com/2018/01/shelter-data-1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
}

.hero-body .title {
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.6);
  padding: 40px 0 20px 0;
  font-size: 60px;
  color: white
}

.subtitle {
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.7);
  font-size: 30px;
  color: white;
}

.button-block {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  position: absolute;
  bottom: -150px;

  .button {
    margin-right: 50px;
    padding-left: 50px;
    padding-right: 50px;
  }

  .welcome {
    width: 400px;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
  }
}

.is-xl {
  font-size: 1.7rem;
}
</style>
