{% extends "base.html" %}
{% load i18n %}

{% block title %}
	{% if edit %}
		{% trans "Edit Rule" %} {{form.data.name}}
	{% else %}
		{% trans "Create new Rule" %}
	{% endif %}
{% endblock %}

{% block breadcrumbs %}
 <li class="active"><span class="divider">/</span>
	{% if edit %}
		{% trans "Edit rule" %} {{form.data.name}}
	{% else %}
	{% trans "Create rule" %}
	{% endif %}
</li>
{% endblock %}
{% block extrahead %}
<script>
	$(document).ready( function(){
		
		
		$('#id_then').attr("multiple", "");
		$( "#id_expires" ).datepicker({ dateFormat: 'yy-mm-dd' , maxDate: '+10d', minDate: '+1d', changeMonth: false, changeYear: false }).datepicker( $.datepicker.regional[ "el" ] );
		{% comment %}
		$('#then_diag').dialog({
			height: 220,
            width: 340,
			modal: true,
			autoOpen: false,
			buttons: {
		'{% trans "Add" %}': function() {
			console.log($("#add_rl_form").serialize());
			$.ajax({
			url:"{% url add-rate-limit %}", 
			data:$("#add_rl_form").serialize(),
			type: "POST",
			cache: false,
			success:function(data){
					try {
						value = data.pk;
						text = data.value;
						$('#id_then').append($("<option></option>").attr("value",value).text(text));
						$('#then_diag').dialog('close');
					}
					catch (exception) {
						$('#then_diag').html(data);
					}					
				}
				});
		},
		'{% trans "Cancel" %}': function() {
			$('#then_diag').dialog('close');
		}
	}
		});
		{% endcomment %}
		$('#port_diag').dialog({
			height: 220,
            width: 340,
			modal: true,
			autoOpen: false,
			buttons: {
		'{% trans "Add" %}': function() {
			$.ajax({
			url:"{% url add-port %}", 
			data:$("#add_port_form").serialize(),
			type: "POST",
			cache: false,
			success:function(data){
					console.log(data);
					try {
						value = data.value;
						text = data.text;
						console.log(text, value);
						if (typeof value === 'undefined' && typeof text === 'undefined'){
							$('#port_diag').html(data);	
						}
						else{
							$('#id_port').append($("<option></option>").attr("value",value).text(text));
							$('#id_destinationport').append($("<option></option>").attr("value",value).text(text));
							$('#id_sourceport').append($("<option></option>").attr("value",value).text(text));
							$('#port_diag').dialog('close');
						}
					}
					catch (exception) {
						$('#port_diag').html(data);
					}					
				}
				});
		},
		'{% trans "Cancel" %}': function() {
			$('#port_diag').dialog('close');
		}
	}
		});
		
		{% comment %}
		$("#new_then_actions").button({
            icons: {
                primary: "ui-icon-plusthick"
            },
			})
			.click(function(){
				$.ajax({
					url: "{% url add-rate-limit %}",
					cache: false,
					success: function(data){
						$("#then_diag").html(data);
					}
				});
				$('#then_diag').dialog('open');
				return false;
			});
			
			{% endcomment %}
			$(".new_port").button()
			.click(function(){
				$.ajax({
					url: "{% url add-port %}",
					cache: false,
					success: function(data){
						$("#port_diag").html(data);
					}
				});
				$('#port_diag').dialog('open');
				return false;
			});
			});
		
</script>
{% endblock %}
{% block content %}
<style type="text/css">



#rule_form_container input:not([type="submit"]), #rule_form_container select {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #DDDDDD;
	-moz-border-radius: 3px; border-radius:3px; -webkit-border-radius: 3px; 
    float: left;
    font-family: "Century Gothic",Helvetica,sans-serif;
    font-size: 13px;
    outline: medium none;
    padding: 5px;
    width: 180px;
}


#rule_form_container{
	-moz-border-radius: 10px 10px 10px 10px; border-radius:10px; -webkit-border-radius: 10px;
	-moz-box-shadow: 0 0 3px #AAAAAA; box-shadow: 0 0 3px #AAAAAA; -webkit-box-shadow: 0 0 3px #AAAAAA; 
	background-color: #F9F9F9;
	border: 2px solid #FFFFFF;
	overflow: hidden;
    width: 800px;
	}
#rule_form_container div label {
    color: #666666;
    float: left;
    font-family: "Century Gothic",Helvetica,sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 26px;
    margin-right: 15px;
    text-align: right;
    text-shadow: 1px 1px 1px #FFFFFF;
    width: 180px;
}
#rule_form_container p.submit {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    box-shadow: none;
}

</style>
<div id="rule_form_wrapper" class="container">
    {% if edit %}<h4>{% trans "Edit rule" %}: {{form.data.name}}</h4>
    {% else %}<h4>{% trans "Apply for a new rule" %}</h4>
    {% endif %}
    <hr>
    <br>
    <form method="POST" class="form-horizontal">
        
            {% csrf_token %}
            {% load unescape %}
            {% if form.non_field_errors %}
            <p class="error">
                {{ form.non_field_errors|unescape}}
            </p>
            {% endif %}
            <fieldset {%  if edit %}  style="display:none;" {%  endif %}>
                <legend>
                    {% trans "Rule Basic Info" %}
                </legend>
                <div class="control-group  {% if form.name.errors %} error {% endif %}">
	                <label class="control-label" for="id_name">{% trans "Name" %}</label>
                    <div class="controls">
                    {{ form.name }}
                    {% if form.name.errors %}
                    <span class="help-inline">
                        {{ form.name.errors|join:", " }}
                    </span>
                    {% endif %}
                    <span class="help-block">A unique identifier will be added as a name_suffix</span>
                    </div>
                </div>
            </fieldset>
            {% if user.is_superuser %}
            <fieldset>
                <legend>
                    {% trans "Admin Options" %}
                </legend>
                  <div class="control-group">
	                <label class="control-label" for="id_applier">{% trans "Applier" %}</label>
                   <div class="controls">{{ form.applier }}</div>
                    {% if form.applier.errors %}
                    <br>
                    <p class="error" style="clear:both;">
                        {{ form.applier.errors|join:", " }}
                    </p>
                    {% endif %}
                </div>
                </fieldset>
                {% else %}
                 <input type="hidden" id="id_applier" name="applier" value="{{applier}}"/>
                {% endif %}
            <fieldset>
                <legend>
                    {% trans "Rule Match Conditions" %}
                </legend>
                <div class="control-group {% if form.source.errors %} error {% endif %}">
	                <label class="control-label" for="id_source">{% trans "Source Address" %}</label>
                    <div class="controls">{{ form.source }}&nbsp;<img src="/fodstatic/threat_source.png" style="height: 30px;"/>
                    {% if form.source.errors %}
                    <span class="help-inline">
                        {{ form.source.errors|join:", " }}
                    </span>
                    {% endif %}
                    <span class="help-block"> {{ form.source.help_text }}</span>
                    </div> 


                </div>
                <div class="control-group {% if form.destination.errors %} error {% endif %}">
	                <label class="control-label" for="id_destination">{% trans "Destination Address" %}</label>
                    <div class="controls">
					{{ form.destination }}&nbsp;<img src="/fodstatic/secure_destination.png" style="height: 30px;"/>
					{% if form.destination.errors %}
                    <span class="help-inline">
                        {{ form.destination.errors|join:", " }}
                    </span>
                    {% endif %}
					<span class="help-block">{{ form.destination.help_text }}</span>
					</div> 

                </div>
				<div class="control-group {% if form.protocol.errors %} error {% endif %}">
	                <label class="control-label" for="id_protocol">{% trans "Protocol" %}</label>
                   <div class="controls">{{ form.protocol }}
                   {% if form.protocol.errors %}
                    <span class="help-inline">
                        {{ form.protocol.errors|join:", " }}
                    </span>
                    {% endif %}
                   </div>
                   
                </div>
			<div
				class="control-group {% if form.port.errors %} error {% endif %}">
				<label class="control-label" for="id_port">{% trans "Ports"	%}</label>
				<div class="controls">
					<div id="portsaccordion" class="accordion">
						<div class="accordion-group">
							<div class="accordion-heading">
								<a class="accordion-toggle" data-toggle="collapse"
									data-parent="#accordion2" href="#collapseOne"> {% trans "Advanced Settings (Ports)" %}</a>
							</div>
							<div id="collapseOne" class="accordion-body collapse">
								<div class="accordion-inner">
								<label>{% trans "Select source/destination port(s), or select common port(s) for both source/destination" %}</label>
								<div class="control-group  {% if form.sourceport.errors %} error {% endif %}">
					                <label class="control-label" for="id_sourceport">{% trans "Source Port" %}</label>
				                    <div class="controls">
				                    {{ form.sourceport }}
				                    
				                    <span class="help-inline">
				                    <button class="new_port btn  btn-small"><i class="icon-plus"></i>{% trans "Port" %}</button>
				                    {% if form.sourceport.errors %}
				                        {{ form.sourceport.errors|join:", " }}
				                    {% endif %}
				                    </span>
				                    
				                    <span class="help-block">{{ form.sourceport.help_text }}</span>
				                    </div>
				                </div>
				                <div class="control-group  {% if form.destinationport.errors %} error {% endif %}">
					                <label class="control-label" for="id_destinationport">{% trans "Destination Port" %}</label>
				                    <div class="controls">
				                    {{ form.destinationport }}
				                    
				                    <span class="help-inline">
				                    <button class="new_port btn  btn-small"><i class="icon-plus"></i>{% trans "Port" %}</button>
				                    {% if form.destinationport.errors %}
				                        {{ form.destinationport.errors|join:", " }}
				                    {% endif %}
				                    </span>
				                    
				                    <span class="help-block">{{ form.destinationport.help_text }}</span>
				                    </div>
				                </div>
				                <div class="control-group  {% if form.port.errors %} error {% endif %}">
					                <label class="control-label" for="id_port">{% trans "Port" %}</label>
				                    <div class="controls">
				                    {{ form.port }}
				                    
				                    <span class="help-inline">
				                    <button class="new_port btn  btn-small"><i class="icon-plus"></i>{% trans "Port" %}</button>
				                    {% if form.port.errors %}
				                        {{ form.port.errors|join:", " }}
				                    {% endif %}
				                    </span>
				                    
				                    <span class="help-block">{{ form.port.help_text }}</span>
				                    </div>
				                </div>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</fieldset>
            <fieldset>
                <legend>
                    {% trans "Rule Actions" %}
                </legend>
                <div class="control-group {% if form.then.errors %} error {% endif %}">
	                <label class="control-label" for="id_then">{% trans "Then" %}</label>
                    <div class="controls">{{ form.then }}
                    {% if form.then.errors %}
                    <span class="help-inline">
                        {{ form.then.errors|join:", " }}
                    </span>
                    {% endif %}
                    </div>
                    {% comment %}&nbsp;&nbsp;
                    <button id="new_then_actions">
                        Rate-limit
                    </button>
                    {% endcomment %}
                    
                </div>
            </fieldset>
            <fieldset>
                <legend>
                    {% trans "Expiration" %}
                </legend>
                <div class="control-group  {% if form.expires.errors %} error {% endif %}">
	                <label class="control-label" for="id_expires">{% trans "Expires" %}</label>
                    <div class="controls">{{ form.expires }}
                    {% if form.expires.errors %}
                    <span class="help-inline">
                        {{ form.expires.errors|join:", " }}
                    </span>
                    {% endif %}
                    </div>
                </div>
            </fieldset>
            <fieldset>
            
            <legend>
                    {% trans "Use/Comments" %}
                </legend>
                <div class="control-group  {% if form.comments.errors %} error {% endif %}">
	                <label class="control-label" for="id_comments">{% trans "Comments" %}</label>
                    <div class="controls">
                    <span class="help-block">{% blocktrans %}Give a short description of the intended use of this rule, that justifies the parameter selection above. Feel free to include any additional comments.{% endblocktrans %}</span>
                    {{ form.comments }}
                    
                    {% if form.comments.errors %}
                    <span class="help-inline">
                        {{ form.comments.errors|join:", " }}
                    </span>
                    {% endif %}
                    </div>
                </div>
            
            </fieldset>
			 <div class="control-group">
			<div class="controls">
			<button type="submit" id="applybutton" value="{% trans 'Apply' %}" class="btn btn-large btn-primary"/>Apply</button>
			</div>
			</div>
                

    </form>
</div>
<div id="then_diag" title="Add new rate-limit value">
</div>
<div id="port_diag" title="{% trans "Add new port" %}">
</div>

{% endblock %}