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

<h3>
<div class="btn btn-outline-success btn-sm float-right" v-on:click="showFormNewTag"><i class="fa fa-plus"></i></div>
Список тегов</h3>
<hr />

{% raw %}
<div class="form-group mt-3" v-if="formNewTag">
<div class="input-group mb-3">
<input class="form-control" type="text" v-model="newTag"/>
<div class="input-group-append">
<div class="btn btn-outline-success float-right" v-on:click="addTag"><i class="fa fa-save"></i></div>
</div>
</div>
</div>

<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>
<button type="button" class="btn btn-outline-danger" v-on:click="deleteTag(tag)"><i class="fa fa-remove"></i></button>
</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: [],
        formNewTag: false,
        newTag: ''
    },
    methods: {
        arrayRemove: function(arr, value) {
            /* Удаление элемента из списка */
            return arr.filter(function(element){
                return element != value;
            });
        },
        addTag: function() {
            /* Добавить тег */
            var vm = this;
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": 'tag.add',
                    "params": {
                        "name": vm.newTag
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        vm.tags.push(response.data['result']);
                        vm.newTag = '';
                    }
                }
            );
        },
        showFormNewTag: function() {
            /* Показать/скрыть форму добавления нового тега */
            var vm = this;
            vm.formNewTag = !vm.formNewTag;
        },
        deleteTag: function(tag) {
            /* Удалить тег */
            var vm = this;
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": 'tag.delete',
                    "params": {
                        "id": tag.id
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        vm.tags = vm.arrayRemove(vm.tags, tag);
                    }
                }
            );
        }
    },
    created: function() {
        /* Получить список тегов после загрузки страницы */
        var 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 %}