{% if not isAjax %}
<!doctype html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>Edit Tags</title>
        <meta name="description" content="">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

        <link rel="stylesheet" href="{{MEDIA_URL}}frog/c/ext-all-gray.css">
        <link rel="stylesheet" href="{{MEDIA_URL}}frog/c/style.css">

        <script src="{{MEDIA_URL}}frog/j/mootoolsCore.js"></script>
{% endif %}

        <style>
            #tag_manage {
                position: relative;
                width: 100%;
                height: 100%;
                background: #202020;
                color: #d2d2d2;
            }
            #tag_manage header {
                font-size: 18px;
                color: #b8d364;
            }
            #tag_manage p {
                margin: 4px;
                font-size: 12px;
            }
            #tag_manage section {
                position: relative;
                float: left;
                width: 30%;
                height: 100%;
                margin: 9px;
                padding: 4px;
            }
            #tag_manage ul {
                position: relative;
                width: 100%;
                min-height: 400px;
                background: #333;
                margin: 0;
                padding: 0;
                border: 1px solid #666;
            }
            #frog_tag_search {
                position: relative;
                width: 298px;
                height: 24px;
                margin: 4px 0;
                font-size: 20px;
                z-index: 2000;
            }
        </style>
    </head>
    <body>
        <div id="tag_manage" class='x-border-box'>
            <section id='frog_add'>
                <header>To Add</header>
                <p>Drag tags here to add them to the current selection</p>
                <ul>

                </ul>
                <input type='search' id='frog_tag_search' />
            </section>
            <section id='frog_sel'>
                <header>Selection</header>
                <p>These tags are on at least one item of the current selection</p>
                <ul>
                    {% for tag in tags %}
                    <li class="frog-tag" data-frog_tag_id="{{tag.id}}">
                        <span></span>
                        {{tag.name}}
                        <div></div>
                    </li>
                    {% endfor %}
                </ul>
            </section>
            <section id='frog_rem'>
                <header>To Remove</header>
                <p>Drag tags here to remove them from the current selection</p>
                <ul>

                </ul>
            </section>
        </div>
{% if not isAjax %}
        <!-- JavaScript at the bottom for fast page loading -->
        <script src="{{MEDIA_URL}}frog/j/mootoolsMore.js"></script>
        <script src="{{MEDIA_URL}}frog/j/libs/Meio.Autocomplete.min.js"></script>

        <!-- scripts concatenated and minified via build script -->
        <script src="{{MEDIA_URL}}frog/j/libs/frog.js"></script>
        <!-- end scripts -->
{% endif %}
        <script type='text/JavaScript'>
            (function() {
                new Sortables($$('#tag_manage UL'), {
                    clone: true,
                    revert: true,
                    opacity: 0.7
                });

                function callback(value, el) {
                    var name, tag;
                    if (value.id > 0) {
                        name = value.name;
                        tag = new Frog.Tag(value.id, name);
                    }
                    else {
                        name = el.value;
                        tag = new Frog.Tag(name, name);
                    }
                    
                    $$('#frog_add ul')[0].grab($(tag));
                    el.value = "";
                }

                $('frog_tag_search').addEvent('keyup', function(e) {
                    if (e.code === 13 && this.value !== "") {
                        callback({id: 0, name: this.value}, this);
                    }
                })
                var completer = new Meio.Autocomplete('frog_tag_search', '/frog/tag/search', {
                    filter: {
                        path: 'name',
                        formatItem: function(text, data) {
                            if (data.id === 0) {
                                return '<span class="search"></span>' + data.name
                            }
                            else {
                                return '<span></span>' + data.name
                            }
                        }
                    },
                    urlOptions: {
                        extraParams: [{
                            name: 'zero', value: true
                        }, {
                            name: 'artist', value: true
                        }]
                    },
                    requestOptions: {
                        headers: {"X-CSRFToken": Cookie.read('csrftoken')},
                    },
                    onSelect: function(elements, value) {
                        if (value !== "") {
                            callback(value, elements.field.node);
                        }
                    }
                });
            })();
        </script>
{% if not isAjax %}
    </body>
</html>
{% endif %}