{% if data != "None" %}
    <p>
    <div>
        Toggle Columns
        {% for col in data['head'] %}
        {% if loop.index0 in toggle_off_keys %}
            <a class="toggle-vis toggleoff" data-column="{{ loop.index0 }}">
                {{ col }}
            </a>
        {% else %}
            <a class="toggle-vis" class="toggleon" data-column="{{ loop.index0 }}">
                {{ col }}
            </a>
        {% endif %}
        {% endfor %}
    </div>
    </p>
    <table id="{{ data['id'] }}" class="display wrap" width="100%">
    	<thead>
    		<tr>
    		{% for col in data['head'] %}
    			<th>{{ col }}</th>
    		{% endfor %}
    		</tr>
    	</thead>
    	<tbody>
    	{% for row in data['data'] %}
    		<tr>
    		{% for attr in row %}
    			<td>{{ attr }}</td>
    		{% endfor %}
    		</tr>
    	{% endfor %}
    	</tbody>
    	<tfoot>
    		<tr>
    		{% for col in data['head'] %}
    			<th>{{ col }}</th>
    		{% endfor %}
    		</tr>
    	</tfoot>
    </table>
    <div>
    <p></p>
    <tr>
        {% if data['delete_url'] != "None" %}
            <td align="center"><a id="delete" class="btn btn-outline-danger" href="#">Delete</a></td>
        {% endif %}
        {% if data['load_url'] != "None" %}
            <td align="center"><a id="load" class="btn btn-outline-primary" href="#">Load</a></td>
        {% endif %}
        {% if data['edit_url'] != "None" %}
            <td align="center"><a id="edit" class="btn btn-outline-primary" href="#">Edit</a></td>
        {% endif %}
        {% if data['overwrite_url'] != "None" %}
            <td align="center"><a id="overwrite" class="btn btn-outline-warning" href="#">Overwrite</a></td>
        {% endif %}
    </tr>
    </div>
    <p></p>
    <hr>

    <script>
    	$(document).ready(function() {
            // Setup - add a text input to each footer cell
            $("#{{ data['id'] }} tfoot th").each( function () {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            } );
            var target_string = "{{ toggle_off_keys }}".replace(/&#39;/g, "'");
            console.log(target_string)
            var targets =  eval(target_string);

            // DataTable
            var table = $("#{{ data['id'] }}").DataTable({
                dom: 'Bfrtip',
    			buttons: [
    				{
    					extend: 'collection',
    					text: 'Export',
    					buttons: [ 'pdf', 'csv', 'copy', 'excel' ]
    				}
                ],
                columnDefs: [
                    {
                        targets: targets,
                        visible: false
                    }
                ],
                scrollX: true,
                select: true
                });

            $("#{{data['id']}} tbody").on( 'click', 'tr', function () {
    			if ( $(this).hasClass('selected') ) {
    				$(this).removeClass('selected');
    			}
    			else {
    				table.$('tr.selected').removeClass('selected');
    				$(this).addClass('selected');
    			}

                //Only works because name column is first column
                var _id = table.cell(this, 0).data();

                //execute url
                if("{{ data['delete_url'] }}" != "None"){
                    var delete_url = "{{ data['delete_url'] }}?_id=" + _id + "&target=" + window.location.href;
                    $("#delete").attr("href", delete_url)
                }
                if("{{ data['load_url'] }}" != "None"){
                    var load_url = "{{ data['load_url'] }}?_id=" + _id;
                    $("#load").attr("href", load_url)
                }
                if("{{ data['edit_url'] }}" != "None"){
                    var edit_url = "{{ data['edit_url'] }}?_id=" + _id + "&edit=True";
                    $("#edit").attr("href", edit_url)
                }
                if("{{ data['overwrite_url'] }}" != "None"){
                    var overwrite_url = "{{ data['overwrite_url'] }}?_id=" + _id + "&overwrite=True";
                    $("#overwrite").attr("href", overwrite_url)
                }
    		} );

            // Apply the search
    		table.columns().every( function () {
    			var that = this;

    			$( 'input', this.footer() ).on( 'keyup change', function () {
    				if ( that.search() !== this.value ) {
    					that
    						.search( this.value )
    						.draw();
    				}
    			} );
    		} );


    		$('a.toggle-vis').on( 'click', function (e) {
    			e.preventDefault();

    			// Get the column API object
    			var column = table.column( $(this).attr('data-column') );

    			// Toggle the visibility
    			column.visible( ! column.visible() );

                //Toggle Class
                if ( $(this).hasClass('toggleoff') ) {
    				$(this).removeClass('toggleoff');
    				$(this).addClass('toggleon');
    			}
    			else {
    				$(this).removeClass('toggleon');
    				$(this).addClass('toggleoff');
    			}
    		} );
        });
    </script>

{% endif %}
