<template>
  <div v-if="blogs" class="blogs_containter">
    <div
      class="blog_containter"
      v-for="(blog, index) in blogs"
      :key="index"
      @click="view_blog(blog)"
    >
      <h2>{{ blog.blog_name }}</h2>
      <div class="blog_cover_image" :style="{ 'background-image': `url(${blog.cover_picture})` }" />
      <p v-text="retrieve_summary(blog)"></p>
    </div>
  </div>
</template>
<script>
import { ContentApi } from '@/utils/index'
export default {
  name: 'Blogs',
  components: {},
  computed: {},
  mounted() {
    this.retrieve_blogs()
  },
  methods: {
    retrieve_blogs() {
      ContentApi.retrieve_blogs(window.location.host)
        .then((response) => {
          this.blogs = response.data
        })
        .catch((error) => {
          this.mnx_backendErrorHandler(error)
        })
    },
    view_blog(blog) {
      if (blog.content_id)
        this.mnx_navToPdfContentViewer(blog.content_id)
      else if (blog.content_link)
        this.mnx_navToLinkContentViewer(btoa(blog.content_link))
    },
    retrieve_summary(blog) {
      return blog.summary_text
    }
  },
  data() {
    return {
      blogs: null
    }
  }
}
</script>
<style scoped lang="scss">
.blogs_containter {
  @extend .container;
  padding: 56px 40px;
}

.blog_containter {
  @extend .container;
  cursor: pointer;
  padding: 0;

  h2,
  p {
    text-align: left;
  }
}

.blog_cover_image {
  width: 100%;
  height: 311px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 16px;
  margin-bottom: 16px;
}
</style>
