<div id="div_{{ field.auto_id }}" class="form-group row">
    <label for="{{ field.auto_id }}" class="col-form-label col-md-3 col-form-label-sm">
        {{ field.label }}
    </label>
    <div class="col-md-9 input-group-sm">
        <style>
            #{{ field.auto_id }}_selection, #{{ field.auto_id }}_available_fields {
                border: 1px solid #eee;
                width: 100%;
                height: 300px;
                overflow: scroll;
                list-style-type: none;
                padding: 5px 0 0 0;
                float: left;
                margin: 0 10px 0 0;
                color: white;
            }

            #{{ field.auto_id }}_selection li, #{{ field.auto_id }}_available_fields li {
                margin: 0 5px 5px 5px;
                padding: 5px;
                font-size: 1.2em;
                width: 98%;
                color: white;
            }

            #{{ field.auto_id }}_available_fields .edit-field {
                visibility: hidden;
            }
        </style>

        <div class="row">

            <div class="col-5" id="selection_div">
                <h6><strong>Selection</strong>
                </h6> <input type="text"
                             id="{{ field.auto_id }}_selected_search_input"
                             placeholder="Search selected fields"
                             class="form-control"
                             style="width: 100%!important;">
                <br>
                <ol id="{{ field.auto_id }}_selection" class="connectedSortable ui-sortable ui-droppable"
                    data-empty-message="Drag available fields from the right to this area." style="font-size: 12px">
                </ol>
            </div>

            <div class="col-4" id="{{ field.auto_id }}_available_fields_div">
                <h6><strong>Available
                    Fields</strong>
                </h6> <input
                    type="text" id="{{ field.auto_id }}_field_search_input"

                    placeholder="Search available fields"
                    class="form-control" style="width: 100%px!important;"> <br>
                <ul id="{{ field.auto_id }}_available_fields" class="connectedSortable ui-sortable ui-droppable"
                    style="font-size: 12px">
                </ul>
            </div>


            <div id="{{ field.auto_id }}_keys" class="col-3">

            </div>
        </div>
    </div>
            <script>
            $(function () {
                let {{ command_prefix }}selection_fields_id_name = '#{{ field.auto_id }}_selection';
                let {{ command_prefix }}available_fields_id_name = '#{{ field.auto_id }}_available_fields';
                let {{ command_prefix }}table_field_keys = '#{{ field.auto_id }}_keys';
                let {{ command_prefix }}main_field = '#{{ field.auto_id }}';
                let {{ command_prefix }}available_fields_data = {};
                let {{ command_prefix }}initial = true;

                function {{ command_prefix }}get_field_html(field_id, label, colour, attr) {
                    let data_attr = '';
                    if(attr !== undefined && attr !== '') {
                        data_attr = ` data-attr="${attr}"`
                    }
                    return `<li class="ui-state-default" data-origin="${field_id}" style="background-color: ${colour}"${data_attr}>
                            <a href="#" class="{{ command_prefix }}edit_field_link"><i class="edit-field fas fa-pencil-alt float-right" style="color:white;"></i></a><span>${label}</span></li>`
                }

                ajax_helpers.command_functions.{{ command_prefix }}report_fields = function (command) {
                    let data = jQuery.parseJSON(command.data);
                    $({{ command_prefix }}selection_fields_id_name).empty();
                    $({{ command_prefix }}available_fields_id_name).empty();
                    $({{ command_prefix }}table_field_keys).empty();
                    {{ command_prefix }}available_fields_data = {};
                    $.each(data['fields'], function (key, value) {

                        {{ command_prefix }}available_fields_data[value.field] = value;
                        $({{ command_prefix }}available_fields_id_name).append({{ command_prefix }}get_field_html(value.field, value.label, value.colour, ''));
                    });
                    $.each(data['tables'], function (key, value) {
                        $({{ command_prefix }}table_field_keys).append('<div class="col-sm-12" style=";font-size: 12px;">' +
                            '<i class="fa fa-square fa-2x" style="opacity:1;color: ' + value.colour + '"></i>' +
                            ' <span>' + value.name + '</span></div>');
                    });
                    if({{ command_prefix }}initial) {
                        {{ command_prefix }}load_section();
                        {{ command_prefix }}initial = false;
                    } else {
                        $({{ command_prefix }}main_field).val('[]')
                    }

                    $('.{{ command_prefix }}edit_field_link').click(function(){
                        let selector = 's' + String(new Date().getTime());
                        let parent_li = $(this).parent()
                        parent_li.attr('id', selector);
                        let field_info = {{ command_prefix }}get_field_dict(parent_li);
                        let field_info_b64 = (btoa(JSON.stringify(field_info)));
                        let url = "{{ select_column_url }}";
                        {% if report_type_id %}
                            django_modal.show_modal(url.replace('99999', selector).replace('REPORT_TYPE_ID', {{ report_type_id }}).replace('FIELD_INFO', field_info_b64))
                        {% else %}
                            django_modal.show_modal(url.replace('99999', selector).replace('REPORT_TYPE_ID', $('#id_report_type').val()).replace('FIELD_INFO', field_info_b64))
                        {% endif %}
                    });

                }

                $({{ command_prefix }}selection_fields_id_name + ', ' + {{ command_prefix }}available_fields_id_name).sortable({
                    connectWith: ".connectedSortable",
                    stop: function () {
                        {{ command_prefix }}update_selection();
                    },
                    receive: function (event, ui) { //only when dropped from one to another!
                        let sourceList = ui.sender;
                        if(sourceList.attr('id') === '{{ field.auto_id }}_available_fields') {
                            let clone = $(ui.item).clone();
                            sourceList.append(clone);  // adds it back to the end
                        } else {
                            ui.item.remove();  // removes it as it already in the list
                        }
                    }

                });

                {% if report_type_id %}
                     $(document).ready(function () {
                        {{ command_prefix }}get_fields({{ report_type_id }});
                    });
                {% else %}
                    $('#id_report_type').on('change', function (e) {
                        {{ command_prefix }}get_fields(this.value);
                    });
                    $(document).ready(function () {
                        {{ command_prefix }}get_fields($('#id_report_type').val());
                    });
                {% endif %}

                function {{ command_prefix }}get_fields(report_type_id) {
                    if (report_type_id === '') {
                        $({{ command_prefix }}selection_fields_id_name).empty();
                        $({{ command_prefix }}available_fields_id_name).empty();
                        $({{ command_prefix }}table_field_keys).empty();
                    } else {
                        django_modal.send_inputs({'ajax': 'get_{{ command_prefix }}fields', 'field_auto_id': '{{ field.auto_id }}'})
                    }
                }


                function {{ command_prefix }}update_selection() {
                    let fields_selection = [];
                    $({{ command_prefix }}selection_fields_id_name).children().each(function () {
                        fields_selection.push({{ command_prefix }}get_field_dict($(this)))
                    });
                    $({{ command_prefix }}main_field).val(JSON.stringify(fields_selection))
                }

                function {{ command_prefix }}get_field_dict(field) {
                    let data_origin = field.attr('data-origin');
                    let title = field.children("span").text()
                    let result = {
                        'field': data_origin,
                        'title': title,
                    };
                    let data_attr = field.attr('data-attr');

                    if(data_attr) {
                        result['data_attr'] = data_attr;
                    }
                    return result;
                }

                function {{ command_prefix }}load_section() {

                    if($({{ command_prefix }}main_field).val() !== '') {
                        let fields = JSON.parse($({{ command_prefix }}main_field).val())
                        $.each(fields, function (key, value) {
                            let field_data = {{ command_prefix }}available_fields_data[value.field];
                            if(field_data == undefined) {
                                $({{ command_prefix }}selection_fields_id_name).append({{ command_prefix }}get_field_html(value.field, value.title, '#D3D3D3'));
                            }
                            else
                            {
                                $({{ command_prefix }}selection_fields_id_name).append({{ command_prefix }}get_field_html(value.field, value.title, field_data.colour, value.data_attr));
                            }
                        });
                    }
                }
                $('#{{ field.auto_id }}_selected_search_input').keyup(function() {
                    {{ command_prefix }}search_fields(this.value, {{ command_prefix }}selection_fields_id_name);
                })
                $('#{{ field.auto_id }}_field_search_input').keyup(function() {
                    {{ command_prefix }}search_fields(this.value, {{ command_prefix }}available_fields_id_name);
                })


                function {{ command_prefix }}search_fields(searchString, area_id) {
                    searchString = searchString.toUpperCase();
                    $(area_id + " li").each(function (index, value) {
                        let currentName = $(value).text()
                        if (currentName.toUpperCase().indexOf(searchString) > -1) {
                            $(value).show();
                        } else {
                            $(value).hide();
                        }
                    });
                }

                ajax_helpers.command_functions.{{ command_prefix }}update_selection = function (command) {

                    {{ command_prefix }}update_selection();
                };
            });
        </script>
</div>
<input type="hidden" name="{{ field.name }}" id="{{ field.auto_id }}" value="{% if field.value %}{{ field.value }}{% endif %}">
