<td colspan="2" align="center">
    <h2>{$params_tpl['title']}{$params_tpl['help']}</h2>
    <div style="display: flex; flex-direction: column;">{$tpl_types['method']}</div>
    <div style="display: flex; flex-direction: column;" id="tpl-p-{$tpl_num}-url">{$tpl_types['url']}</div>
    <div style="display: flex; flex-direction: column;" id="tpl-p-{$tpl_num}-json">{$tpl_types['json']}</div>
    <div style="display: flex; flex-direction: column;" id="tpl-p-{$tpl_num}-field">{$tpl_types['field']}</div>
    <div style="display: flex; flex-direction: column;" id="tpl-p-{$tpl_num}-fields">{$tpl_types['fields']}</div>
    <div style="display: flex; flex-direction: column;">{$tpl_types['headers']}</div>
    <div style="display: flex; flex-direction: column;">{$tpl_types['tosave']}</div>
    <div style="display: flex; flex-direction: column;">{$tpl_types['repeats']}</div>
</td>
<script>
    (function() {

        var method = $('select[name="calc_params[{$tpl_num}][method]"]');
        
        var jsonBlock = $('#tpl-p-{$tpl_num}-json');
        var fieldBlock = $('#tpl-p-{$tpl_num}-field');
        var fieldsBlock = $('#tpl-p-{$tpl_num}-fields');

        var flexField = $('select[name="calc_params[{$tpl_num}][field]"]');
        var tosaveField = $('select[name="calc_params[{$tpl_num}][tosave]"]');

        var url = $('textarea[name="calc_params[{$tpl_num}][url]"]');
        var json = $('textarea[name="calc_params[{$tpl_num}][json]"]');

        var fieldTarget = url;

        $(flexField).prepend('<option value="" selected></option>');
        $(tosaveField).prepend('<option value=""></option>');

        method.change(function() {
            const value = $(this).val();
            switch (value) {
                case "GET":
                    jsonBlock.hide();
                    fieldsBlock.hide();
                    fieldBlock.show();
                    fieldTarget = url;
                    break;
                case "FORM":
                    jsonBlock.hide();
                    fieldBlock.hide();
                    fieldsBlock.show();
                    break;
                case "JSON":
                    jsonBlock.show();
                    fieldsBlock.hide();
                    fieldBlock.show();
                    fieldTarget = json;
                    break;
            }
        }).change();

        $(flexField).change(function() {
            if ($(this).val() == "") {
                return;
            }

            var text = fieldTarget.val();
            var option = $('option[value="' + $(this).val() +'"]');
            {literal}
            var optinForInsert = '{' + option.html() + '}';
            var position = $(fieldTarget).prop('selectionStart');
            text = text.substr(0, position) + optinForInsert + text.substr(position);
            {/literal}

            fieldTarget.val(text);
            var index = this.selectedIndex;
            var indextext = this.selectedIndex.innerHTML;
            var indexVal = flexField[0][index].getAttribute('value');

            $(fieldTarget).change()
            this.selectedIndex = 0;
        });
    })();
</script>
