{% extends "user/skeleton.html" %}
{% block content %}

<h3>
<a class="btn btn-outline-secondary" :href="'/page/' + page.id"><i class="fa fa-chevron-left"></i></a>
Редактирование страницы
</h3>
<hr />

<div class="form-group">
<label class="control-label" for="title">Заголовок</label>
<input class="form-control" id="title" name="title" type="text" v-model="page.title">
</div>

<div class="form-group">
<label class="control-label" for="body">Текст</label>
<textarea class="form-control" cols="40" id="body" name="body" v-model="page.body" rows="8"></textarea>
</div>

<div class="row mt-3">
<div class="col">
<button type="button" class="btn btn-outline-success pull-right" v-on:click="send"><i class="fa fa-save-o"></i> Сохранить</button>
</div>
</div>


{% 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"><a href="/pages">Страницы</a></li>
    <li class="breadcrumb-item"><a href="/page/{{ pagedata['page'].id }}">{{ pagedata['page'].title }}</a></li>
    <li class="breadcrumb-item active">Редактирование страницы</li>
</ol>
{% endblock %}

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

<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        page: {{ pagedata['page']|tojson|safe }}
    },
    methods: {
        send: function () {
            /* Сохранить */
            let vm = this;
            var value = CKEDITOR.instances["body"].getData();
            if (value != vm.page.body) {
                vm.page.body = value;
            }
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": "page.update",
                    "params": {
                        "id": vm.page.id,
                        "title": vm.page.title,
                        "body": vm.page.body
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        window.location.href = '/page/' + response.data['result'].id;
                    }
                }
            );
        }
    },
    mounted: function () {
{{ editor.tinymce('body') }}
    }
})
</script>
{% endblock %}