<?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>select2-themes/css/select2.min.css</file>
            </css>
            <js>
                <file>select2/js/select2.full.min.js</file>
                <file>select2/js/i18n/%language%.js</file>
            </js>
        </includes>
        <js_code><![CDATA[   function buildTemplate(option) {
        var output  = option.text, // default
            icon    = $(option.element).data('icon');
            content = $(option.element).data('content');
        if (icon !== undefined) {
            if (icon.match('material-icons')) {
                output = $('<span><i class="material-icons left">' + icon.replace('material-icons', '').trim() + '</i>' + option.text + '</span>');
            } else {
                output = $('<span><i class="' + icon + ' me-3"></i>' + option.text + '</span>');
            }
        }
        if (content !== undefined) {
            output = $('<span>' + content + option.text + '</span>');
        }
        return output;
    }
    $("%selector%").each(function() {
        var elWidth = '100%';
        if ($(this).data('width') !== undefined) {
            elWidth = $(this).data('width');
        } else if ($(this).parent('.input-group').length > 0) {
            elWidth = 'auto';
        }
        var dataTags = false,
            dataTokenSeparators = [];
        if ($(this).data('tags') !== undefined) {
            dataTags = $(this).data('tags');
            dataTokenSeparators = [',', ' '];
        }
        var dataCloseOnSelect = true;
        if ($(this).attr('multiple') == 'multiple') {
            dataCloseOnSelect = false;
        }
        $(this).select2({
            theme: "%theme%",
            templateResult: buildTemplate,
            tags: dataTags,
            tokenSeparators: dataTokenSeparators,
            closeOnSelect: dataCloseOnSelect,
            width: elWidth
        });
        $(this).on("change", function(e) {
            const evt = new Event('change.select2', { bubbles: true });
            document.querySelector('select[name="' + this.name + '"]').dispatchEvent(evt);
            var formId = $(this).closest('form').attr('id');
            var form   = forms[formId];
            if (typeof(form.fv) == 'object'&& this.name in form.fv.elements) {
                form.fv.revalidateField(this.name);
            }
        });
    }, $("%selector%"));
    $(".select2-container--material .select2-selection__arrow")
        .html('<small class="text-muted">▼</small>');]]>
        </js_code>
    </default>
    <countries-flags-16>
        <includes>
            <css>
                <file>select2-themes/css/select2.min.css</file>
                <file>countries/world-flags-sprite/stylesheets/flags16.min.css</file>
            </css>
            <js>
                <file>select2/js/select2.min.js</file>
            </js>
        </includes>
        <js_code><![CDATA[   function formatState (state, container) {
        var stateClass = '';
        if (state.element) {
            $(container).addClass($(state.element).attr("class"));
        }
        if (!state.id) {
            return state.text;
        }
        var lowerId = state.id.toLowerCase();
        if (lowerId.length < 4) {
            stateClass = 'flag ' + lowerId;
        } else if (state.element) {
            stateClass = $(state.element).attr("class");
        }
        var $state = $('<a class="f16"><span class="' + stateClass + '"><span class="text">' + state.text + '</span></span></a>');

        return $state;
    };
    $("%selector%").select2({
        theme: "%theme%",
        templateResult: formatState
    });]]>
        </js_code>
    </countries-flags-16>
    <countries-flags-32>
        <includes>
            <css>
                <file>select2-themes/css/select2.min.css</file>
                <file>countries/world-flags-sprite/stylesheets/flags32.min.css</file>
            </css>
            <js>
                <file>select2/js/select2.min.js</file>
            </js>
        </includes>
        <js_code><![CDATA[   function formatState (state, container) {
        var stateClass = '';
        if (state.element) {
            $(container).addClass($(state.element).attr("class"));
        }
        if (!state.id) {
            return state.text;
        }
        var lowerId = state.id.toLowerCase();
        if (lowerId.length < 4) {
            stateClass = 'flag ' + lowerId;
        } else if (state.element) {
            stateClass = $(state.element).attr("class");
        }
        var $state = $('<a class="f32"><span class="' + stateClass + '"><span class="text">' + state.text + '</span></span></a>');

        return $state;
    };
    $("%selector%").select2({
        theme: "%theme%",
        templateResult: formatState
    });]]>
        </js_code>
    </countries-flags-32>
</root>
