
        var conf = {
            form: '#save_message_template',
            lang : '{{ app.js_validator_language }}',
            showHelpOnFocus : true,
            validateOnBlur : true,
            validateHiddenInputs: true,
            scrollToTopOnError: false,
            modules: 'jsconf',

            onSuccess: function () {
                var sendData = new Object();
                $("#modalbox").find('form').find(".own_fields:not(:disabled)").each(function () {
                    if ($(this).val()) {
                        if (this.type.toUpperCase() != 'CHECKBOX' || this.checked) {
                            sendData[this.name] = $(this).val();
                        }
                    }
                });
                JScloseModalBox();
                ajaxPostSend($("#modalbox").find('form').attr('action'), sendData, false, false);
                return false;
            },

            onError: function () {
                return false;
            }
        };

        function InitDatatable() {
            $('#datatable-1').on('xhr.dt', function (e, settings, json) {
                if (typeof (json.data) == 'object') {
                    for (var i in json.data) {
                        var id = json.data[i].id;

                        json.data[i].login = '<a href="#" class="no_context_menu">' +escapeHtml( json.data[i].login )+ '</a>';
                        json.data[i].title = '<a class="main_ajax no_context_menu" href="{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/message-templates-list-json" data-id="'+ id +'">' +escapeHtml( json.data[i].title )+ '</a>';

                        if (json.data[i]['created'] != 0) {
                            var dateOn = new Date(json.data[i]['created']);
                            json.data[i]['created'] = dateOn.toLocaleFormat("%b %d, %Y");
                        }
                        if (json.data[i]['edited'] != 0) {
                            var dateOn = new Date(json.data[i]['edited']);
                            json.data[i]['edited'] = dateOn.toLocaleFormat("%b %d, %Y");
                        }

                        json.data[i].operations = "<div class='col-xs-3 col-sm-8'>\n\
                                                        <a href='#' class='dropdown-toggle no_context_menu' data-toggle='dropdown'>\n\
                                                            <i class='pull-right fa fa-cog'></i>\n\
                                                        </a>\n\
                                                        <ul class='dropdown-menu pull-right'>\n\
                                                            <li>\n\
                                                                <a class='main_ajax no_context_menu' href='{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/message-templates-list-json' data-id='"+ id +"'>\n\
                                                                    <span> {{ 'Edit'|trans }} </span>\n\
                                                                </a>\n\
                                                            </li>\n\
                                                            <li>\n\
                                                                <a class='main_ajax no_context_menu' href='{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/remove-template' data-id='" + id + "'>\n\
                                                                    <span> {{ 'Delete'|trans }} </span>\n\
                                                                </a>\n\
                                                            </li>\n\
                                                        </ul>\n\
                                                    </div>";
                    }
                }
            }).dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/message-templates-list-json"
                },
                "language": {
                    "url": "{{ app.datatable_lang_file }}"
                },
                {% if attribute(app, 'dropdownAttribute') is defined %}
                {{ main_macro.get_datatable_column(app['dropdownAttribute']) }}
                {% endif %}
                "bFilter": true,
                "bPaginate": true,
                "lengthChange": true,
                "bInfo": true,
                "columnDefs": [
                    { className: "action-menu", "targets": [ -1 ] },
                    {"searchable": false, "targets": [-1, -2, -3]},
                    {"sortable": false, "targets": [-1]}
                ]
            }).prev('.dataTables_processing').hide('');
        }

        function yelp() {
            $(document).ready(function () {

                // no forms at this point
                //$.validate(conf);

                $(document).on('click', "a.main_ajax[disabled!='disabled']", function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    var $this = $(this);
                    $this.closest('div.open').removeClass('open');

                    if( $this.attr("href").indexOf("remove-template") !== -1 && !confirm("{{"Delete this template?"|trans}}") ) {
                        return false;
                    }
                    
                    $("#modalbox").data('complete', 0);
                    var sendData = $this.data();
                    ajaxPostSend($this.attr('href'), sendData, false, false, true);
                    return false;
                });

                $(document).on('click', "#modalbox, #modalbox a.close-link, #modalbox a.close-link *", function(e){
                    if (e.currentTarget != e.target) {
                        return;
                    }
                    e.stopPropagation();
                    e.preventDefault();
                    closeModalBox();
                    return false;
                });

                $(document).on("click", "#msg_tpl_create", function(e){
                    if (e.currentTarget != e.target) {
                        return;
                    }
                    e.stopPropagation();
                    e.preventDefault();

                    getTemplateForm();

                    $('#modalbox').show();

                    return false;
                });

                $(document).on('click', "#modalbox button[type='submit']", function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    if ($(conf.form).isValid({}, conf, true)) {
                        conf.onSuccess();
                    } else {
                        conf.onError();
                    }

                    return false;
                });

                $(document).on('click', "#modalbox button[type='reset']", function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    closeModalBox();
                    return false;
                });

                LoadDataTablesScripts(InitDatatable);
            });
        }

        document.addEventListener("DOMContentLoaded", yelp, false);
              
        function closeModalBox(){
            $("#modalbox").hide();
            $('#modalbox').find('.modal-header-name span').empty();
            $('#modalbox').find('.devoops-modal-inner').empty();
            $('#modalbox').find('.devoops-modal-bottom').empty();
        }

        function getTemplateForm(templateName){
            $("#modalbox").data('complete', 1);
            if (templateName) {
                $('#modalbox').find('.modal-header-name span').text('{{ 'Editing template'|trans }} "' + templateName + '"');
            } else {
                $('#modalbox').find('.modal-header-name span').text('{{ 'New template'|trans }}');
            }

            $('#modalbox').find('.devoops-modal-inner').html($("#modal_form_body").text());
            $('#modalbox').find('.devoops-modal-bottom').html($("#modal_form_buttons").text());
            $.validate(conf);
        }

        var fillModalForm = function(data){
            closeModalBox();
            getTemplateForm(data.data[0]['title']);
            if (data.data.length == 1) {
                var row = data.data[0];
                for (var field_name in row) {
                    var field = $("#modalbox .own_fields[name='msg_tpl[" + field_name + "]']");
                    if (field.length != 0) {
                        field.val(row[field_name]);
                    }
                }
            }
            $.validate(conf);
            $('#modalbox').show();
        }
