<template>
  <div>
    <!-- Added navbar -->
    <navbar />
    <div class="blogs-page">
      <div class="main-content">
        <div class="container">
          <div class="columns is-mobile">
            <div class="column is-8 is-offset-2">
              <div class="section">
                <div class="title">
                  <h1>Detail View</h1>
                  <hr>
                </div>
                <div class="post-content">
                  <h1 class="title">{{ post.title }}</h1>
                  <h2 class="subtitle">{{ post.subtitle }}</h2>
                  <div class="markdown">
                    <!-- Post Markdown content -->
                    <div v-html="compiledMarkdown"></div>
                  </div>
                </div>
              </div>
              <!-- end of post -->
            </div>
            <!-- end of side bar -->
          </div>
        </div>
      </div>
    </div>
    <!-- Added button to back Homepage which is centered-->
    <!-- Of course we can write function to routing but I think it's simpler solution -->
    <div class="has-text-centered">
      <button @click="$router.push('/')" class="button is-primary">Back to Homepage</button>
    </div>
    <!-- End block -->
  </div>
</template>
<script>
import Navbar from '~/components/Navbar' // import navbar

export default {
  components: {
      Navbar
  },
  computed: {
      post() {
          return this.$store.state.post.item
      },
      compiledMarkdown() {
          if (process.client) {
              return marked(this.post.content, {sanitize: true})
          }

          return ''
      }
  },
  fetch({params, store}) {
      return store.dispatch('post/fetchPostById', params.id)
  },
}
</script>