<template>
    <div>


        <h2 v-if="page" v-html="page.name"></h2>

        <div v-if="page" v-html="page.content"></div>
        <b-button :to="editTarget" variant="outline"><i class="fa fa-2x fa-fw fa-edit"></i></b-button>
        <hr>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: "Pages",
    data: () => ({
        page: null
    }),
    watch: {
        $route() {
            console.log("watch called")
            this.getPagesDetails()
        }
    },
    beforeMount() {
        this.getPagesDetails()
    },
    methods: {
        getPagesDetails() {
            const slug = this.$route.params.slug
            console.log("slug: " + slug)

            axios
                .get('/api/pages?slug=' + slug)
                .then(response => (this.page = response.data['hydra:member'][0]))
        }
    },
    computed: {
        editTarget() {
            if (this.page) {
                return "/pages/edit/" + this.page.slug
            }
        }
    }
}
</script>