{% extends 'bridge/base.html' %}
{% comment "License" %}
% Copyright (c) 2019 ISP RAS (http://www.ispras.ru)
% Ivannikov Institute for System Programming of the Russian Academy of Sciences
%
% Licensed under the Apache License, Version 2.0 (the "License");
% you may not use this file except in compliance with the License.
% You may obtain a copy of the License at
%
%    http://www.apache.org/licenses/LICENSE-2.0
%
% Unless required by applicable law or agreed to in writing, software
% distributed under the License is distributed on an "AS IS" BASIS,
% WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
% See the License for the specific language governing permissions and
% limitations under the License.
{% endcomment %}

{% load i18n %}
{% load static %}
{% load compress %}

{% block head_block %}
    {% compress css file tagsmap %}
        <link href="{% static 'marks/css/tagsmap.css' %}" rel="stylesheet">
    {% endcompress %}
    {% compress js file tagsmap %}
        <script type="text/javascript" src="{% static 'marks/js/tagsmap.js' %}"></script>
    {% endcompress %}
{% endblock %}

{% block title %}{% trans 'Tags' %}{% endblock %}

{% block body_block %}
    <div class="tagsmap">
        {% if tree.can_create %}
            <div class="ui tiny buttons" style="float:right;">
                <a id="download_all_tags" class="ui tiny basic violet button" href="{% url 'marks:tags-download' %}"><i class="ui download icon"></i>{% trans 'Download tags' %}</a>
                <button id="upload_tags" class="ui tiny basic violet button"><i class="ui upload icon"></i>{% trans 'Upload tags' %}</button>
            </div>
        {% else %}
            <a id="download_all_tags" class="ui tiny basic violet button" href="{% url 'marks:tags-download' %}" style="float: right;"><i class="ui download icon"></i>{% trans 'Download tags' %}</a>
        {% endif %}
        {% if tree.can_create %}<button id="create_root_tag" class="ui tiny basic teal button"><i class="ui add icon"></i>{% trans 'Create new root tag' %}</button>{% endif %}

        <br><br>
        <p style="margin-left: 10px"><i class="ui large gift purple icon"></i> <span style="color: #808080" class="italic">- {% trans 'Preset tags' %}</span></p>

        <div style="display: table">
            {% for row in tree.table %}
                <div style="display: table-row">
                {% for cell in row %}
                    {% if cell and cell.type == 'link' %}
                        <div style="display: table-cell" class="tag-tree-link" data-links="{{ cell.value }}">&nbsp;</div>
                    {% elif cell and cell.type == 'tag' %}
                        <div style="display: table-cell" id="tag__{{ cell.value.id }}" class="edit-tag-cell">{{ cell.value.shortname }}</div>
                    {% else %}
                        <div style="display: table-cell">&nbsp;</div>
                    {% endif %}
                {% endfor %}
                </div>
            {% endfor %}
        </div>
    </div>

    {% for row in tree.table %}
        {% for cell in row %}
            {% if cell and cell.type == "tag" %}
                {% include 'marks/TagPopup.html' with tag=cell.value access=cell.access %}
            {% endif %}
        {% endfor %}
    {% endfor %}

    <div id="edit_tag_modal" class="ui dinamic modal">
        <div class="ui header">{% trans 'Edit tag' %}</div>
        <div class="content">
            <div class="ui form">
                <div class="ui grid">
                    <div class="eight wide column">
                        <label class="bold-text" for="edit_tag_name">{% trans 'Name' %}</label>
                        <div class="ui input fluid">
                            <input id="edit_tag_name" type="text" maxlength="32">
                        </div>
                    </div>
                    <div class="eight wide column">
                        <label class="bold-text" for="edit_tag_parent">{% trans 'Parent' %}</label>
                        <select id="edit_tag_parent" class="ui search selection dropdown fluid">
                            <option value="0">{% trans 'Root' %}</option>
                        </select>
                    </div>
                </div>
                <br>
                <label class="bold-text" for="edit_tag_description">{% trans 'Description' %}</label>
                <textarea id="edit_tag_description" rows="7" placeholder="{% trans 'Description' %}" style="resize:none"></textarea>
                <br><br>
            </div>
        </div>
        <div class="actions">
            <div class="ui grid">
                <div class="eight wide column left aligned">
                    <button class="ui green button small modal-confirm">{% trans 'Save' %}</button>
                </div>
                <div class="eight wide column right aligned">
                    <button class="ui blue button small modal-cancel">{% trans 'Cancel' %}</button>
                </div>
            </div>
        </div>
    </div>

    <div id="create_tag_modal" class="ui dinamic modal">
        <div class="ui header">{% trans 'Create tag' %}</div>
        <div class="content">
            <div class="ui form">
                <div class="ui grid">
                    <div class="eight wide column">
                        <label class="bold-text" for="create_tag_name">{% trans 'Name' %}</label>
                        <div class="ui input fluid">
                            <input id="create_tag_name" type="text" maxlength="32">
                        </div>
                    </div>
                    <div class="eight wide column">
                        <p>{% trans 'Parent' %}: <span id="create_tag_parent"></span></p>
                    </div>
                </div>
                <br>
                <label class="bold-text" for="create_tag_description">{% trans 'Description' %}</label>
                <textarea id="create_tag_description" rows="7" placeholder="{% trans 'Description' %}" style="resize:none"></textarea>
                <br><br>
            </div>
        </div>
        <div class="actions">
            <div class="ui grid">
                <div class="eight wide column left aligned">
                    <button class="ui green button small modal-confirm">{% trans 'Create' %}</button>
                </div>
                <div class="eight wide column right aligned">
                    <button class="ui blue button small modal-cancel">{% trans 'Cancel' %}</button>
                </div>
            </div>
        </div>
    </div>
    <div id="remove_tag_modal" class="ui basic modal">
        <div class="ui icon header">
            <i class="warning sign icon"></i>
            {% trans 'Are you sure' %}?
        </div>
        <div class="content">
            <div class="ui center aligned grid">
                <p>{% trans 'All children of the selected tag will be also removed' %}!</p>
            </div>
        </div>
        <div class="actions">
            <div class="ui center aligned grid">
                <button class="ui blue basic inverted button modal-cancel">{% trans 'Cancel' %}</button>
                <button class="ui red basic inverted button modal-confirm">{% trans 'Remove' %}</button>
            </div>
        </div>
    </div>
    <div id="upload_tags_modal" class="ui modal">
        <div class="header">{% trans 'Upload tags' %}</div>
        <div class="content">
            <div class="ui grid">
                <div class="four wide column right aligned">
                    <span class="ui violet button btn-file">{% trans 'Browse' %}<input id="upload_tags_file_input" type="file"></span>
                </div>
                <div class="twelve wide column">
                    <span id="upload_tags_filename"></span>
                </div>
            </div>
        </div>
        <div class="actions">
            <button class="ui green left button modal-confirm">{% trans 'Upload' %}</button>
            <button class="ui blue button modal-cancel">{% trans 'Cancel' %}</button>
        </div>
    </div>
    <div id="change_access_tag_modal" class="ui dinamic modal">
        <div class="ui header">{% trans 'Edit users access' %}</div>
        <div class="content">
            <div class="ui form">
                <div class="ui field">
                    <label for="change_access_edit_select">{% trans 'Users can modify' %}</label>
                    <select id="change_access_edit_select" class="ui fluid dropdown" multiple></select>
                </div>
                <div class="ui field">
                    <label for="change_access_create_select">{% trans 'Users can create children' %}</label>
                    <select id="change_access_create_select" class="ui fluid dropdown" multiple></select>
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui grid">
                <div class="eight wide column left aligned">
                    <button class="ui green button small modal-confirm">{% trans 'Save' %}</button>
                </div>
                <div class="eight wide column right aligned">
                    <button class="ui blue button small modal-cancel">{% trans 'Cancel' %}</button>
                </div>
            </div>
        </div>
    </div>
    <span id="user_access_placeholder" hidden>{% trans 'Select users' %}</span>
    <span id="api_success_message" hidden>{% trans 'Saved' %}!</span>

    <script type="application/javascript">
    jQuery(function (){
        let tags_tree = new TagsTree("{% url 'marks:api-tags-list' %}", "{% url 'marks:api-tags-upload' %}");
        tags_tree.Initialize();
    });
    </script>
{% endblock %}