{% load i18n %}
<div id="image_tags_list" class="well"></div>
<div style="clear: both;"></div>
<div id="plugin_populate_section">
    <h5>{% trans "Register tags required for the Plugin with specified Data Processing Version" %}</h5>
    <span class="row">
        <span class="col-sm-4 small-padding"><b>{% trans "Plugin" %}</b></span>
        <span class="col-sm-4 small-padding"><b>{% trans "Version" %}</b></span>
    </span>
    <span class="row">
        <span class="col-sm-4 small-padding">
            <select id="plugin_select" class="plugin-choice form-control">
                {% for plugin, version_dict in plugins.items %}
                    <option value="{{ plugin }}">{{ plugin }}</option>
                {% endfor %}
            </select>
        </span>
        <span class="col-sm-4 small-padding">
            {% for plugin, version_dict in plugins.items %}
            <div id="version_group_{{ plugin }}" class="data_processing-version-choice" >
                <select id="data_processing_version_{{ plugin }}" class="form-control">
                    {% for version, tags in version_dict.items %}
                        <option value="{{ version }}">{{ version }}</option>
                    {% endfor %}
                </select>
            </div>
            {% endfor %}
        </span>
        <span class="col-sm-4 small-padding">
            <input type="button" id="add_all_btn" class="btn btn-default" value="{% trans "Add plugin tags" %}" />
        </span>
    </span>
    <span class="row">
        <span class="col-sm-8 small-padding">
            <input type="text" class="tag-input form-control" id="_sahara_image_tag"/>
        </span>
        <span class="col-sm-3 small-padding">
            <button type="button" id="add_tag_btn" class="btn btn-default btn-small btn-create btn-inline" onclick="add_tag_to_image()">{% trans "Add custom tag" %}</button>
        </span>
    </span>

</div>

<script type="text/javascript">
    $(function() {
        $(".plugin-choice").change(function(e) {
            $(".data_processing-version-choice").hide();
            var val = $(this).val();
            $("#version_group_" + val).show();
        }).change();

        $("#add_all_btn").click(function(e) {
            var plugin = $("#plugin_select").val();
            var version = $("#data_processing_version_" + plugin).val();
            var tags = plugin_tags_map[plugin][version];
            $(tags).each(function(idx, tag) {
                add_tag_to_image(tag);
            });
        })
    });

   $("#_sahara_image_tag").keypress(function (event) {
        if (event.keyCode == 13) {
            add_tag_to_image();
            return false;
        }
        return true;
    });
    function add_tag_to_image(tag) {
        if (!tag) {
            tag = $.trim($("#_sahara_image_tag").val());
        }
        if (tag.length == 0) {
            return;
        }

        $("#image_tags_list span").each(function (el) {
            if ($.trim($(this).text()) == tag) {
                return;
            }
        });

        var tags = get_current_tags();
        if ($.inArray(tag, tags) == -1) {
          var span = ' <span class="label label-warning" style="float: left;display: block; margin: 2px;">$tag <i class="glyphicon glyphicon-remove" onclick="remove_tag(this);"></i></span>'.replace("$tag", tag)
          $("#image_tags_list").append(span);
          update_image_tags();
        }
        $("#_sahara_image_tag").val("");
    }

    function get_current_tags() {
      var tags = [];
      $("#image_tags_list span").each(function (el) {
        tags.push($.trim($(this).text()));
      });
      return tags;
    }

    function update_image_tags() {
        var tags = get_current_tags();
        $("#id_tags_list").val(JSON.stringify(tags));
    }

    function remove_tag(icon) {
        span = icon.parentNode;
        span.parentNode.removeChild(span);
        update_image_tags()
    }

    // {"plugin": {"v1": [...tags...], "v2": [...tags...]},
    //  "other_plugin": ... }
    var plugin_tags_map = {};
    {% for plugin, version_dict in plugins.items %}
        plugin_tags_map["{{ plugin }}"] = {};
        {% for version, tags in version_dict.items %}
            plugin_tags_map["{{ plugin }}"]["{{ version }}"] = [];
            {% for tag in tags %}
                plugin_tags_map["{{ plugin }}"]["{{ version }}"].push("{{ tag }}");
            {% endfor %}
        {% endfor %}
    {% endfor %}
</script>
