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

<h3>
<div class="btn btn-outline-success  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">
Object.assign(root.data, {
    tags: [],
    formNewTag: false,
    newTag: ''
});
Object.assign(root.methods, {
    addTag: function() {
        /* Добавить тег */
        let 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() {
        /* Показать/скрыть форму добавления нового тега */
        let vm = this;
        vm.formNewTag = !vm.formNewTag;
    },
    deleteTag: function(tag) {
        /* Удалить тег */
        let 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);
                }
            }
        );
    }
});
root.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 %}
