{% extends "base.html" %}
{% load i18n %}
{% block extrahead %}
<script type="text/javascript" src="/static/js/jquery.dataTables.js"></script>
<script type="text/javascript">
	$(document).ready( function(){
		$("#hid_mid").val('');
		$('#dialog').dialog({
			height: 220,
            width: 300,
			modal: true,
			autoOpen: false,
			buttons: {
		'Delete': function() {
		route = $('#route_to_delete').text();
		route_url_id = '#del_route_'+route;
		url = $(route_url_id).attr('href');
			$.ajax({
			url: url ,
			cache: false,
			success: function(data) {
				$('#dialog').dialog('close');
				window.setTimeout('location.reload()', 1000);
			  }
		});
		},
		Cancel: function() {
			$('#dialog').dialog('close');
		},
		

	},
	close: function() {
        update_val = $("#hid_mid").val();
		if (update_val == 'UPDATED'){
			$("#hid_mid").val('');
			window.setTimeout('location.reload()', 500);
		}
    }
		});
		$('#console').dialog({
			height: 250,
            width: 800,
			modal: true,
			autoOpen: false,
			close: function() {
		        update_val = $("#hid_mid").val();
				if (update_val == 'UPDATED'){
					$("#hid_mid").val('');
					window.setTimeout('location.reload()', 500);
				}
		    }
		});
			
		$('#routes_table').dataTable( {
			"bJQueryUI": true,
			"oLanguage": {
				"sLengthMenu": '{% trans "Display" %} <select><option value="25">25</option><option value="50">50</option><option value="-1">{% trans "All" %}</option></select> rules'
			},
			"iDisplayLength": 25,
	} );
	$( ".button_place #routebutton" ).button({
            icons: {
                primary: "ui-icon-circle-plus"
            },
			});
		$( " .edit_button" ).button({
            icons: {
                primary: "ui-icon-wrench"
            },
			});
		$( " .del_button" ).button({
            icons: {
                primary: "ui-icon-circle-close"
            },
			})
			.click(function(){
				$('#dialog').dialog('open');
				return false;
			});
		$("#consolebutton").button({
            icons: {
                primary: "ui-icon-image"
            },
			})
			.click(function(){
				$("#consolebutton").stop().stop();
				$("#consolebutton").css('color', '#555555');
				$('#console').dialog('open');
				return false;
			});

		});
		
function delete_route(route){
	route_name = route;
	$('#route_to_delete').text(route_name);
	return false;
}		
		
		

</script>
<style type="text/css">
	#console {
		background: none repeat scroll 0 0 #36102a !important;
		color: #edeae8 !important;
		font-family: monospace !important;
	}
	.message {
		font-family: monospace !important;
	}
	
</style>
{% endblock %}
{% block title %}{% trans "My rules" %}{% endblock %}
{% block content %}
<div style="float:left">
	<h3 style="margin-top: 0px;">{% trans "My rules" %}</h3>
</div>
<div class='button_place' style="float:right">
	<button id="consolebutton">Console</button> <a href="{% url add-route %}" id="routebutton">Add Rule</a>
</div>
<table class="display" width="100%" id="routes_table">
<thead>
<tr>
	<th>{% trans "Name" %}</th>
	<th>{% trans "Match" %}</th>
	<th style="text-align: center;">{% trans "Then" %}</th>
	<th style="text-align: center;">{% trans "Status" %}</th>
	{% comment %}<th style="text-align: center;">{% trans "Details" %}</th>{% endcomment %}
	<th style="text-align: center;">{% trans "Applier" %}</th>
	<th style="text-align: center;">{% trans "Expires" %}</th>
	<th style="text-align: center;">{% trans "Response" %}</th>
	<th style="text-align: center; width:140px;">{% trans "Actions" %}</th>
</tr>
</thead>

<tbody>
{% for route in routes %}

<tr {% ifequal route.status 'ACTIVE' %} class="GradeA" {% else %} class="GradeX" {% endifequal %}>
	<td>{{ route.name }}</td>
	<td>{{ route.get_match|safe|escape }}</td>
	<td style="text-align: center;">{{route.get_then|safe|escape}}</td>
	<td style="text-align: center;">{{route.status}}</td>
	{% comment %}<td style="text-align: center;">{{ route.response }}</td>{% endcomment %}
	<td style="text-align: center;">{{ route.applier }}</td>
	<td style="text-align: center;">{{ route.expires }}</td>
	<td style="text-align: center;">{{ route.response }}</td>
	<td style="text-align: center;">
		{% ifequal route.status 'ACTIVE' %}
		<a href="{% url edit-route route.name %}" class="edit_button" id="edit_button_{{route.pk}}">Edit</a> 
		<button class="del_button" id="{{route.name}}" onclick="javascript:delete_route(this.id)">Del</button>
		<a href="{% url delete-route route.name %}" style="display:none" id="del_route_{{route.name}}"></a>
		{% else %}
		{% ifequal route.status 'INACTIVE' %}
		<a href="{% url edit-route route.name %}" class="edit_button" id="edit_button_{{route.pk}}">Reactivate</a>
		{% else %}
		{% ifequal route.status 'OUTOFSYNC' %}
		<a href="{% url edit-route route.name %}" class="edit_button" id="edit_button_{{route.pk}}">ReSync</a>
		{% else %}
		-
		{% endifequal %}
		{% endifequal %}
		{% endifequal %}</td>
</tr>

{% endfor %}
</tbody>
</table>

<div id="dialog" title="Delete Route">
		<p>You are about to delete rule <strong><span id="route_to_delete"></span></strong></p>
		<p>Deleting the rule will automatically remove the configuration from the network and mark this route as inactive.</p>
		<p>Are you sure you want to proceed?</p>
</div>
<div id="console" title="Console">
					{% include "poll.html" %}
</div>
{% endblock %}