<template>
  <div>
    <site-header></site-header>
    <div class="wrapper">
      <side-bar></side-bar>
      <main class="container" v-html="pureContent()" />
    </div>
  </div>
</template>

<script>
import SiteHeader from '~/components/presentational/SiteHeader'
import SideBar from '~/components/presentational/SideBar'
import NoteBlock from '~/components/presentational/NoteBlock'

export default {
  name: 'SidebarTemplate',
  props: ['breadcrumb', 'attributes', 'content'],
  components: {
    SiteHeader,
    SideBar,
    NoteBlock
  },
  methods: {
    pureContent () {
      const c = this.content.replaced
      const re = new RegExp(`<p>--FML-\\[(\\w+)\\]</p>`, 'g')
      return c.replace(re, ($0, $1) => `<component v-bind:is="${$1.toLowerCase()}"></component>`)
    }
  }
}
</script>