Firewall on Demand

                </div>

<div class="panel-body">

                    <div class="table-responsive">

                    	<table class="table table-striped table-bordered" id="routes_table">

<thead>

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )

    // DataTables 1.10 compatibility - if 1.10 then versionCheck exists.

    // 1.10s API has ajax reloading built in, so we use those abilities

    // directly.

    if ( $.fn.dataTable.versionCheck ) {

        var api = new $.fn.dataTable.Api( oSettings );

        if ( sNewSource ) {

            api.ajax.url( sNewSource ).load( fnCallback, !bStandingRedraw );

        }

        }

        return;

    }

    if ( sNewSource !== undefined && sNewSource !== null ) {

        oSettings.sAjaxSource = sNewSource;

    }

    // Server-side processing should just call fnDraw

    if ( oSettings.oFeatures.bServerSide ) {

        this.fnDraw();

        return;

    }

    this.oApi._fnProcessingDisplay( oSettings, true );

    var that = this;

    var iStart = oSettings._iDisplayStart;

    var aData = [];

    this.oApi._fnServerParams( oSettings, aData );

    oSettings.fnServerData.call( oSettings.oInstance, oSettings.sAjaxSource, aData, function(json) {

        /* Clear the old information from the table */

        that.oApi._fnClearTable( oSettings );

        /* Got the data - add it to the table */

        var aData =  (oSettings.sAjaxDataProp !== "") ?

            that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;

        for ( var i=0 ; i<aData.length ; i++ )

        {

            that.oApi._fnAddData( oSettings, aData[i] );

        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();

        that.fnDraw();

        if ( bStandingRedraw === true )

        {

            oSettings._iDisplayStart = iStart;

            that.oApi._fnCalculateEnd( oSettings );

            that.fnDraw( false );

        }

        that.oApi._fnProcessingDisplay( oSettings, false );

        /* Callback user function - for event handlers etc */

        if ( typeof fnCallback == 'function' && fnCallback !== null )

        {

$(document).ready( function(){

    oTable = $('#routes_table').dataTable( {

        "bPaginate": true,

        "bFilter": true,

         "fnInitComplete": function(oSettings, json) {

         	oTable.fnSetColumnVis( 0,false );

         	update_size();

          	$('body').on('click', '.revertbutton', function () {

            	var my = $(this);

            	my.parent().html(oldhtml);

                     {"mData":"id", "bSearchable": false,"bSortable": false, "bvisible":false},

                     {"mData":"name", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                     }

                     },

                     {"mData":"match", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                     }

                     },

                     {"mData":"then", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                     }

                     },

                     {"mData":"status", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     			return '<span class="label label-default">DEACTIVATED</span>';

                     		}

                     		else

                     			if (status == "OUTOFSYNC"){

                     				return '<span class="label label-danger">ERROR</span>';

                     			}

                     				return '<span class="label label-danger">'+status+'</span>';

                     			}

                     		}

                     }

                     },

                     {"mData":"applier", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                     }

                     },

                     {"mData":"expires", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                     }},

                     {"mData":"response", "sClass" : "alignCenter","bSearchable": true,"bSortable": true,

                     "mRender": function (data, type, full) {

                     	status = full.status;

                     	toolt = '<a rel="tooltip" href="#" data-toggle="tooltip" data-placement="top"';

	                     		if (status == "INACTIVE" ){

	                     			title = "{% trans 'Deactivated by user' %}";

	                     		}

                     editurl = "{% url edit-route 'routename'  %}".replace('routename', full.name.toString());

                     if (status == "ACTIVE" ){

                     	btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline">{% trans "Edit" %}</a>';

                     }

                     if (status == 'EXPIRED' || status == 'ADMININACTIVE' || status == 'INACTIVE' ){

                     	btn = '<a href="'+editurl+'" class="btn-info btn btn-sm btn-outline" id="edit_button_{{route.pk}}">{% trans "Reactivate" %}</a>';

                     return btn;

                     },

                    }

         ]

} );

$('#filterplaceholder').html(filterbtns);

    $('body').on('click', 'button[name="status_filter"]', function(){

    	var reg_exp = '';

        var checkboxs = document.getElementsByName('status_filter');

    clearTimeout(window.refresh_size);

    window.refresh_size = setTimeout(function() { update_size(); }, 250);

  });

var update_size = function() {

    $(oTable).css({ width: $(oTable).parent().width() });

    pw=$(oTable).parent().width();

    	oTable.fnSetColumnVis( 7,true );

    	oTable.fnSetColumnVis( 5,true );

    }

  }

$("body").tooltip({ selector: '[data-toggle="tooltip"]' });

</script>

<style type="text/css">

	.dl-horizontal dt {

    width: 70px;

}