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

<h3>Список пользователей</h3>
<hr />

{% raw %}
<div class="row" v-for="(user, userIdx) in users">
<div class="col py-2">
<a :href="'/user/' + user.id">{{ user.name }}</a>

<small class="text-muted">
<br />
Создан: {{ user.created }}
</small>

</div>
</div>
{% endraw %}

<backtotop-component></backtotop-component>

{% 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">Список пользователей</li>
</ol>
{% 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">
var app = new Vue({
    el: '#app',
    data: {
        users: []
    },
    methods: {
        getUserList: function() {
            var vm = this;
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": 'users',
                    "params": {
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        vm.users = response.data['result'];
                    }
                }
            );
        }
    },
    created: function() {
        var vm = this;
        vm.getUserList();
    }
})
</script>
{% endblock %}