{% extends "skeleton.html" %}
{% block body %}

{% raw %}
<h3>
<div class="btn btn-outline-secondary float-right" v-on:click="showPanel(panels.edit)"><i class="fa fa-edit"></i></div>
{{ page.title }}</h3>
<hr />

<div class="row" v-if="panels.edit.visible">
<div class="col">

<div class="form-group">
<label for="title">Заголовок</label>
<input id="title" name="title" type="text" value="Заголовок страницы" class="form-control" v-model="newPage.title">
</div>

<div class="form-group">
<label for="text">Текст</label>
<textarea class="form-control" id="text" name="text" v-model="newPage.text"></textarea>
</div>

<div class="row">
<div class="col">
<button class="btn btn-outline-success float-right" v-on:click="send"><i class="fa fa-save-o"></i> Сохранить</button>
</div>
</div>
<div class="row mt-3" v-if="error">
<div class="col bg-danger text-white" v-html="error">
</div>
</div>

</div>
</div>
<span v-html="page.text" v-else></span>

{% endraw %}

{% endblock %}

{% block breadcrumb %}
<ol class="breadcrumb mt-3">
    <li class="breadcrumb-item"><a href="/"><i class="fa fa-home"></i></a></li>
    <li class="breadcrumb-item active">Редактирование страницы</li>
</ol>
{% endblock %}

{% block script %}
<script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>

<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        page: {{ pagedata['page']|tojson|safe }},
        newPage: {{ pagedata['page']|tojson|safe }},
        panels: {
            edit: {
                visible: false
            }
        },
        error: null
    },
    methods: {
        showPanel: function(panel) {
            /* Показать/скрыть панель */
            panel.visible = !panel.visible;
        },
        send: function() {
            var vm = this;
            var value = CKEDITOR.instances["text"].getData();
            if (value != vm.newPage.text) {
                vm.newPage.text = value;
            }
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": 'page.update',
                    "params": {
                        "title": vm.newPage.title,
                        "text": vm.newPage.text
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        vm.page = response.data['result'];
                        vm.newPage = vm.page;
                        vm.error = null;
                    } else if ('error' in response.data) {
                        vm.error = response.data['error'].message;
                    }
                }
            );
        }
    },
    updated: function() {
        var vm = this;
        for(var instanceName in CKEDITOR.instances) {
            CKEDITOR.instances[instanceName].destroy(true);
        }
        if (vm.panels.edit.visible) {
            CKEDITOR.replace( "text", {
                customConfig: '/static/js/ckeditor-conf.js'
            } );
        }
    }
})
</script>
{% endblock %}