{% load datatable_tags %}
<div class="d-flex">
    <div id="fb-{{ datatable.table_id }}" class="side-filter card{% if datatable.hidden_side_bar %} fb-collapsed{% endif %}">
        <div class="py-1 px-2">{{ filter_title }}
            <div class="float-right">
                {{ datatable.filter_menu }}
            </div>
            {% no_of_results datatable %}
            {% no_of_rows datatable %}
        </div>
        <div class="card-body p-2">
            <div id="{{ datatable.table_id }}-filter-block">
                {% table_search datatable %}
                {% for f in datatable.js_filter_list %}
                    {{ f.render }}
                {% endfor %}
            </div>
        </div>
    </div>
    <div id="fb-c-{{ datatable.table_id }}" class="collapsed-bar {% if not datatable.hidden_side_bar %} fb-collapsed{% endif %}">
        {{ datatable.collapsed_filter_menu }}
    </div>
</div>

{% block javascript %}
    <script>
        $('.filter-modal').on('click', function(e){
            e.stopPropagation()
            ajax_helpers.post_json({data:{ajax_method: 'datatable_columns', datatable: '{{ datatable.table_id }}'}})
        })

        $("#{{ datatable.table_id }}-filter-block").sortable();
        $("#{{ datatable.table_id }}-filter-block").disableSelection();
        function collapse_all(html_id) {
            $("#" + html_id + "-filter-block .card-body").collapse('hide')
        }
        function show_all(html_id) {
            $("#" + html_id + "-filter-block .card-body").collapse('show')
        }

        var data = localStorage.getItem('{{ datatable.local_storage_key }}');
        data = data ? JSON.parse(data) : null;
        if (data != null){
            show_hide_filter_block('{{ datatable.table_id }}', !data.hidden_side_bar)
        } else {
            show_hide_filter_block('{{ datatable.table_id }}', {% if datatable.hidden_side_bar %}false{% else %}true{% endif %})
        }
        function show_hide_filter_block(table_id, show, save_state) {
            if (show) {
                $('#fb-c-' + table_id).addClass('fb-collapsed');
                $('#fb-' + table_id).removeClass('fb-collapsed');
            } else {
                $('#fb-' + table_id).addClass('fb-collapsed');
                $('#fb-c-' + table_id).removeClass('fb-collapsed');
            }
            if (save_state === true){
                django_datatables.DataTables.{{ datatable.table_id }}.table.api().state.save()
            }
        }

        function filter_control(){
            this.init = function (table) {
                this.pTable = table;
            }
            this.filter = function (data) {
                return true
            }
            this.save_state = function(data){
                data.hidden_side_bar=$('#fb-' + this.pTable.table_id).hasClass('fb-collapsed')
            }
            this.load_state = function (state_data){
                show_hide_filter_block('{{ datatable.table_id }}', !state_data.hidden_side_bar)
            }
        }
        var new_filter = new filter_control()
        django_datatables.add_filter('{{ datatable.table_id }}', new_filter)

        var clear_plugin = {
        refresh: function (table) {
            var page_info = table.table.api().page.info()
            if (page_info.recordsTotal !== page_info.recordsDisplay) {
                $('.{{ datatable.table_id }}-reset-button').addClass('text-warning')
            } else {
                $('.{{ datatable.table_id }}-reset-button').removeClass('text-warning')
            }
        }
    }
    django_datatables.add_plugin('{{ datatable.table_id }}', clear_plugin)
    </script>
{% endblock %}

{% block remove_registration %}{% endblock %}