<template>
    <div v-if="!isLoading">
        <div id="edit-wrapper">
            <div class="editor mt-2">
                <VueEditor v-model="page.content"></VueEditor>
            </div>
            <b-button @click="saveContent" class="mt-3 mb-2">Save</b-button>
        </div>
    </div>
    <div v-else>
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <span class="sr-only">Loading …</span></div>
</template>

<script>

import axios from "axios";

// Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor";



export default {
    name: 'PagesEdit',
    components: {
        VueEditor
    },
    data: () => ({
        page: null,
        isLoading: true
    }),
    methods: {
        saveContent() {
            console.log(this.page)
            axios
                .put('/api/pages/' + this.page.id, this.page)
                .then(response => {
                    console.log("resp:" + response)
                })
        }
    },
    beforeMount() {
        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]
                this.isLoading = false
            })
    },
}
</script>

<style>
    .ql-container {
        height: 800px !important;
        overflow-y: scroll;
    }
</style>