<template>
  <div class="learning--post--page page">
    <section class="s1">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="post">
              <video
                v-if="learning.video"
                class="media"
                controls
                :src="learning.video"
                :poster="learning.cover"
              ></video>
              <img v-else class="media" :src="learning.cover" :alt="learning.title" />
              <div class="ck-content" v-html="learning.description"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'LearningDetailsPage',
  async asyncData({ $axios, params, error }) {
    try {
      const learning = await $axios.get(`/api/public/learning/${encodeURIComponent(params.post)}`)
      return {
        learning: learning.data
      }
    } catch (e) {
      error({ status: 404, message: 'Page not found' })
    }
  },
  data() {
    return {
      learning: null
    }
  },
  head() {
    return {
      title: this.learning.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.learning.title
        }
      ]
    }
  }
}
</script>
