{{ textarea }}
<div id="{{ id }}_form"></div>

<style>
    #{{ id }}_form {
        background: #F5F5F5;
        border-radius: 5px;
        padding: 10px;
    }

    #{{ id }}_form input {
        width: 100%;
    }
</style>

<script>

    var cmsQeTableFilter = document.querySelector('#{{ id }}');
    var cmsQeTableFilterForm = document.querySelector('#{{ id }}_form');
    var cmsQeTableFilterValue = {% if value %}{{ value|safe }}{% else %}{}{% endif %};

    cmsQeTableFilter.style.display = 'none';

    function cmsQeTableResetFilter() {
        cmsQeTableFilter.value = '{}';
        cmsQeTableFilterForm.innerHTML = '';
    }

    function cmsQeTableSetFilter(sameTable, columns) {
        if (sameTable) {
            cmsQeTableFilter.value = JSON.stringify(cmsQeTableFilterValue);
        }

        for (var i = 0; i < columns.length; i++) {
            var name = columns[i][0];
            var verboseName = columns[i][1];
            var type = columns[i][2];

            var id = '{{ id }}_filterForm_' + name;

            var label = document.createElement('label');
            label.setAttribute('for', id);
            label.innerHTML = verboseName;

            input = document.createElement('input');
            input.setAttribute('data-filter-form-input', '');
            input.id = id;
            input.name = name;
            if (type === 'string' || type === 'integer' || type === 'float') {
                input.value = sameTable ? (cmsQeTableFilterValue[name] || '') : '';
                if (type === 'integer' || type === 'float') {
                    input.type = 'number';
                }
            } else if (type === 'boolean') {
                input.type = 'checkbox';
                if (sameTable && cmsQeTableFilterValue[name]) {
                    input.checked = checked;
                }
            } else {
                continue;
            }
            input.addEventListener('change', function(event) {
                var filter = {};
                document.querySelectorAll('[data-filter-form-input]').forEach(function (input) {
                    var value = input.type === 'checkbox' ? input.checked : input.value;
                    if (value) {
                        filter[input.name] = value;
                    }
                });
                cmsQeTableFilter.value = JSON.stringify(filter);
            });

            var div = document.createElement('div');
            div.appendChild(label);
            div.appendChild(input);

            cmsQeTableFilterForm.appendChild(div);
        }
    }

</script>
