{$dialog_id = 'f-tag-assign-dialog-'}

<div class="dialog width450px height350px f-tag-assign-dialog" id="{$dialog_id}">
    <form>
        <div class="dialog-background"></div>
        <div class="dialog-window">
            <div class="dialog-content">
                <div class="dialog-content-indent">
                    <h1>[`Assign tags`]</h1>

                    {strip}
                    <div class="f-tags-wrapper" data-add-tag-text="[`enter tags`]">
                        <input id="{$dialog_id}tags-input" type="text" name="tags" value="">

                        {$_count = count($popular_tags)}
                        {if $_count > 0}
                            <ul class="f-popular-tags menu-h">
                                <li>[`Popular tags`]:</li>
                                {foreach $popular_tags as $tag_id => $tag_name name=tloop}
                                    <li>
                                        <a href="javascript:void(0);" class="inline-link"><b><i>{$tag_name|escape}</i></b></a>
                                    </li>
                                {/foreach}
                            </ul>
                        {/if}
                    </div>
                    {/strip}

                </div>
            </div>
            <div class="dialog-buttons">
                <div class="dialog-buttons-gradient">
                    {$wa->csrf()}
                    <input class="button green" type="submit" value="[`Assign`]">
                    <i class="icon16 loading" style="display:none;"></i> [`or`] <a class="cancel" href="javascript:void(0);">[`cancel`]</a>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    $(function() {
        var dialog = $('#{$dialog_id}');
        $('.f-tag-assign-dialog').not(dialog).remove();

        var default_text = '[`Add tag`]';

        dialog.filesDialog({
            onLoad: function() {
                var input = $(':input[name="tags"]', dialog);
                input.tagsInput({
                    defaultText: default_text,
                    autocomplete_url: '',
                    autocomplete: {
                        source: function (request, response) {
                            $.getJSON('?module=tag&action=autocomplete&term=' + request.term,
                                function (r) {
                                    if (r.status === 'ok') {
                                        response(r.data.tags || []);
                                    } else {
                                        response([]);
                                    }
                                });
                        }
                    }
                });
                input.importTags('');

                $('.f-popular-tags', dialog).find('a').click(function () {
                    var name = $(this).text();
                    input.removeTag(name);
                    input.addTag(name);
                });

                // Placeholder hack
                dialog.find("#f-tag-assign-dialog-tags-input_tag").val("").attr("placeholder", default_text);

            },
            onSubmit: function() {
                var input = $(':input[name="tags"]', dialog);

                // add not finished tag
                var current_tag_input = $('#' + input.attr('id') + '_tag');
                var tag = current_tag_input.val();
                if (tag && tag !== default_text) {
                    input.addTag(tag);
                }

                var tags = (input.val() || '').trim();
                if (!tags) {
                    dialog.trigger('close').remove();
                    return false;
                }
                $.files.jsonPost({
                    url: '?module=tag&action=save&add=1',
                    data: { file_id: {$file_ids|json_encode}, tags: tags },
                    onAlways: function() {
                        $.files.controller.reloadPage();
                        dialog.trigger('close').remove();
                    }
                });
                return false;
            },
            onCancel: function () {
                dialog.remove();
            }
        });
    });
</script>