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

{% raw %}
<h3>
<a class="btn btn-outline-secondary" href="/users"><i class="fa fa-chevron-left"></i></a>
{{ user.name }}</h3>
<hr />
{% endraw %}

{% include 'user_menu.html' %}

<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>

{% include 'inc/pages.html' %}

<pagination-component v-bind:pagination="pagination" v-bind:click-handler="getPages"></pagination-component>

<backtotop-component></backtotop-component>

{% 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="/user">Список пользователей</a></li>
    <li class="breadcrumb-item">{{ user.name }}</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/pagination.js"></script>

<script type="text/javascript">
Object.assign(root.data, {
    menuitem: 'pages',
    user: {{ pagedata['user']|tojson|safe }},
    raw_pages: [],
    pagination: {{ pagedata['pagination']|tojson|safe }},
});
Object.assign(root.methods, {
    filterApply: function() {},
    filterPage: function(page) {
        let vm = this;
        if ( vm.filter.length<1 ) {
            return true;
        }
        if ( page.title.toLowerCase().includes(vm.filter.toLowerCase()) ) {
            return true;
        }
        return false;
    },
    getPages: function() {
        /* Получить список статей */
        let vm = this;
        axios.post(
            '/api',
            {
                "jsonrpc": "2.0",
                "method": "pages",
                "params": {
                    "page": vm.pagination.page
                },
                "id": 1
            }
        ).then(
            function(response) {
                if ('result' in response.data) {
                    vm.raw_pages = response.data['result'];
                }
            }
        );
    },
});
root.created = function() {
    let vm = this;
    axios.post(
        '/api',
        [
            {
                "jsonrpc": "2.0",
                "method": "user.pages",
                "params": {
                    "id": vm.user.id,
                    "page": vm.pagination.page
                },
                "id": 1
            },
            {
                "jsonrpc": "2.0",
                "method": "user.pages.count",
                "params": {
                    "id": vm.user.id,
                },
                "id": 1
            }
        ]
    ).then(
        function(response) {
            if ('result' in response.data[0]) {
                vm.raw_pages = response.data[0]['result'];
            }
            if ('result' in response.data[1]) {
                vm.pagination.size = response.data[1]['result'];
            }
        }
    );
};
    computed: {
        pages: function() {
            /* Отфильтрованный список */
            let vm = this;
            var result = vm.raw_pages.filter(vm.filterPage);
            return result; 
        },
    },
})
</script>
{% endblock %}