<template>
  <div>
    <div class="block" v-if="page">
      <article class="container container--slim">
        <h1>{{ page.title }}</h1>
        <div v-html="renderContent(page.content)" class="post-styles"></div>
      </article>
      <Newsletter />
    </div>
    <div v-if="!page" class="not-found">
      <h2>Stránka nebyla nalezena.</h2><br>
      <Button link="/" arrow="left">Zpět na články</Button>
    </div>
  </div>
</template>

<script>
import Newsletter from '@/components/newsletter/Newsletter.vue';

export default {
  async fetch({ store, params, redirect }) {
    await store.dispatch('loadPosts');
    await store.dispatch('loadTags');
    await store.dispatch('loadPages');
  },
  components: {
    Newsletter,
  },
  head () {
    const title = this.page ? this.page.title : 'Stránka nebyla nalezena';
    return {
      title: title,
      meta: [
        { hid: 'og:title', name: 'og:title', content: title },
      ],
    };
  },
  computed: {
    page() {
      return this.$store.getters.getPageBySlug(this.$route.params.slug);
    },
  },
  methods: {
    renderContent(content) {
      content = content.replace('.jpg"', '@2x.jpg"');
      content = content.replace('http://admin.piratipracuji.cz/uploads/', 'https://res.cloudinary.com/pirati/image/fetch/w_1600,q_auto,f_auto/https://admin.piratipracuji.cz/uploads/');
      return content;
    },
  }
};
</script>
<style lang="scss" scoped>
  .block {
    padding-top: 6.4%;

    @media (max-width: 550px) {
        padding-top: 12.4%;
        padding-bottom: 13.8%;
    }

    article {
      width: 100%;
    }
  }

</style>
<style lang="scss">
  @import '@/assets/scss/post-styles.scss';
</style>