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

<h3>Список тегов</h3>
<hr />

{% raw %}
<div class="row">
<div class="col py-2">
<div class="btn-group mr-2 mb-3" v-for="(tag, tagIdx) in tags">
<a class="btn btn-outline-secondary" :href="'/tag/' + tag.id">{{ tag.name }}</a>
</div>
</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: {
        tags: [],
    },
    methods: {
    },
    created: function() {
        /* Получить список тегов после загрузки страницы */
        let vm = this;
        axios.post(
            '/api',
            {
                "jsonrpc": "2.0",
                "method": 'tags',
                "params": {},
                "id": 1
            }
        ).then(
            function(response) {
                if ('result' in response.data) {
                    vm.tags = response.data['result'];
                }
            }
        );
    }
})
</script>
{% endblock %}
