<?xml version="1.0" encoding="UTF-8"?>
<root>
    <default>
        <includes>
            <!--
                Path to css and js files into plugins folder.
                If your files are not in plugins folder, use absolute paths.
            -->
            <css>
                <file>jquery-ui/jquery-ui.min.css</file>
            </css>
            <js>
                <file>jquery-ui/jquery-ui.min.js</file>
            </js>
        </includes>
        <js_code>
<![CDATA[   var availableTags = [%availableTags%];
    $("%selector%").autocomplete({
      source: availableTags
    });]]>
        </js_code>
    </default>
    <remote>
        <js_code>
<![CDATA[   $("%selector%").autocomplete({
      source: "%remote%",
      minLength: %minLength%
    });]]>
        </js_code>
    </remote>
    <remote-tags>
        <includes>
            <css>
                <file>jquery-ui/jquery-ui.min.css</file>
                <file>tag-editor/jquery.tag-editor.min.css</file>
            </css>
            <js>
                <file>jquery-ui/jquery-ui.min.js</file>
                <file>tag-editor/jquery.caret.min.js</file>
                <file>tag-editor/jquery.tag-editor.min.js</file>
            </js>
        </includes>
        <js_code>
<![CDATA[   $("%selector%").each(function() {
        var dataAttr = $(this).data();

        var dataInitialTags      = (dataAttr.initialTags === undefined) ? [] : dataAttr.initialTags,
            dataMaxTags          = (dataAttr.maxTags === undefined) ? null : dataAttr.maxTags,
            dataMaxLength        = (dataAttr.maxLength === undefined) ? 50 : dataAttr.maxLength,
            dataDelimiter        = (dataAttr.delimiter === undefined) ? ',;' : dataAttr.delimiter,
            dataPlaceholder      = (dataAttr.placeholder === undefined) ? '' : dataAttr.placeholder,
            dataForceLowercase   = (dataAttr.forceLowercase === undefined) ? true : dataAttr.forceLowercase,
            dataRemoveDuplicates = (dataAttr.removeDuplicates === undefined) ? true : dataAttr.removeDuplicates,
            dataClickDelete      = (dataAttr.clickDelete === undefined) ? false : dataAttr.clickDelete,
            dataAnimateDelete    = (dataAttr.animateDelete === undefined) ? 175 : dataAttr.animateDelete,
            dataSortable         = (dataAttr.sortable === undefined) ? true : dataAttr.sortable;
        $(this).tagEditor({
            autocomplete: {
                source: "%remote%",
                minLength: %minLength%
            },
            maxLength: dataMaxLength,
            delimiter: dataDelimiter,
            placeholder: dataPlaceholder,
            forceLowercase: dataForceLowercase,
            removeDuplicates: dataRemoveDuplicates,
            clickDelete: dataClickDelete,
            animateDelete: dataAnimateDelete,
            sortable: dataSortable
        });
        if ($(this).closest('.input-group')[0]) {
            $(this).closest('.input-group').css('flex-wrap', 'nowrap');
        }
    });]]>
        </js_code>
    </remote-tags>
    <custom>
        <!--
            If you need differents includes for your custom code,
            copy the default '<includes>' structure and put the needed files into '<file>' nodes.
            You can add several files nodes if necessary.
        -->
        <js_code>
            <!-- your custom code here -->
        </js_code>
    </custom>
</root>
