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

<h3>
<a class="btn btn-outline-secondary" href="/pages"><i class="fa fa-chevron-left"></i></a>
{{ page.title }}
</h3>

<tags-component v-bind:tags="page.tags" v-bind:node="page.id" v-bind:url="'Page'"></tags-component>

<span v-html="page.body"></span>

<backtotop-component></backtotop-component>

{% endraw %}
{% endblock %}

{% block breadcrumb %}
{% raw %}
<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 active" v-html="page.title"></li>
</ol>
{% endraw %}
{% endblock %}

{% block script %}
<script type="text/javascript" src="/static/components/backtotop.js"></script>
<link rel="stylesheet" href="/static/components/backtotop.css"></link>
<script type="text/javascript" src="/static/components/tags.js"></script>

<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
        page: {{ pagedata['page']|tojson|safe }},
    },
    methods: {
        pageDelete: function() {
            /* Удалить статью в корзину */
            let vm = this;
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": 'page.delete',
                    "params": {
                        "id": vm.page.id
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        window.location.href = '/pages';
                    }
                }
            );
        },
        showPanel: function(panel) {
            /* Показать/скрыть панель */
            panel.visible = !panel.visible;
        },
        saveStatus: function() {
            let vm = this;
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": 'page.status',
                    "params": {
                        "id": vm.page.id,
                        "status": vm.page.status
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        vm.page = response.data['result'];
                    }
                }
            );
        }
    }
})
</script>
{% endblock %}