<template>
  <f7-page name="notifications">
    <f7-navbar title="Notifications" back-link="Back"></f7-navbar>
    <f7-block-title>
      <h2>Recent Notifications</h2>
    </f7-block-title>
    <f7-block>
      <div v-for="(notifications,index) in user_notifications" :key="index">
        <f7-list v-for="(notification, i) in notifications" :key="i">
          <h2 v-html="notification.title"></h2>
          <p v-html="notification.message_details"></p>
          <span
            class="small-time"
            v-html="moment(notification.timestamp).format('MMMM Do YYYY, h:mm a')"
          ></span>
        </f7-list>
      </div>
    </f7-block>
  </f7-page>
</template>
<script>
import moment from "moment";
import firebase from "firebase";
export default {
  data() {
    return {
      posts: []
    };
  },
  computed: {
    user_notifications() {
      return this.$store.getters.user_notifications;
    }
  },
  methods: {},
  created() {
    this.$store.dispatch("getUserNotifications");
  }
};
</script>
<style scoped>
.div {
  margin-top: 0.3px;
}
.small-time {
  font-size: 0.7em;
  margin-top: 0.01px;
}
</style>