{% extends "layout.html" %}
{% block title %}Networking{% endblock %}
{% block content %}
<div class="span9">
	{{ super() }}
	<form id="config" class="form-horizontal" action="{{ url_for('lxc_net') }}" method="post">
		<h3 class="head head-networking">LXC Network</h3>
		<div class="control-group switch-networking">
			<div class="controls" style="margin-left: 5px;">
				<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove icon-white'></i>" data-on="success" data-off="danger">
					<input type="checkbox" name="use" value="true" {% if cfg.use == 'true' %}checked{% endif %}{% if running != [] %} disabled{% endif %} />
				</div>
			</div>
		</div>
		
		{% if running != [] %}<h4 class="text-error">Please, stop all containers before restart lxc-net.</h4><br />{% endif %}

	
		<div class="lxc-net">			
			<div class="control-group">
				<label class="control-label" for="inputBridge">Bridge name</label>
				<div class="controls">
					<input pattern="[a-zA-Z0-9_-]+" type="text" id="inputBridge" name="bridge" value="{{ cfg.bridge }}"{% if running != [] %} disabled{% endif %}>
					<span class="help-inline"><small>(e.g lxcbr0)</small></span>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label" for="inputGateway">IP Address</label>
				<div class="controls">
					<input pattern="(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" type="text" id="inputGateway" name="address" value="{{ cfg.address }}"{% if running != [] %} disabled{% endif %}>
					<span class="help-inline"><small>(e.g 10.0.3.1)</small></span>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label" for="inputNetmask">Netmask</label>
				<div class="controls">
					<input pattern="(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" type="text" id="inputNetmask" name="netmask" value="{{ cfg.netmask }}"{% if running != [] %} disabled{% endif %}>
					<span class="help-inline"><small>(e.g 255.255.255.0)</small></span>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label" for="inputNetwork">Network</label>
				<div class="controls">
					<input pattern="(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:/\d{1,2}|)" type="text" id="inputNetwork" name="network" value="{{ cfg.network }}"{% if running != [] %} disabled{% endif %}>
					<span class="help-inline"><small>(e.g 10.0.3.0/24)</small></span>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label" for="inputDHCPRange">DHCP Range</label>
				<div class="controls">
					<input pattern="(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\,(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" type="text" id="inputDHCPRange" name="range" value="{{ cfg.range }}"{% if running != [] %} disabled{% endif %}>
					<span class="help-inline"><small>(e.g 10.0.3.2,10.0.3.254)</small></span>
				</div>
			</div>

			<div class="control-group">
				<label class="control-label" for="inputDHCPMax">DHCP Max</label>
				<div class="controls">
					<input pattern="(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" type="text" id="inputDHCPMax" name="max" value="{{ cfg.max }}"{% if running != [] %} disabled{% endif %}>
					<span class="help-inline"><small>(e.g 253)</small></span>
				</div>
			</div>
		</div>
		<div class="control-group">
			<div class="controls">
				<button class="btn btn-primary btn-success" name="submit" value="apply" type="submit"{% if running != [] %} disabled{% endif %}><i class="icon-ok icon-white"></i> Apply</button>
				<span class="help-inline"><small>If you change these settings, don't forget to change containers addresses!</small></span>
			</div>
		</div>
	</form>
	
</div>
{% endblock %}
{% block script %}
	<script src="{{ url_for('static', filename='js/bootstrapSwitch.js') }}"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var networking = $(".lxc-net");
			var inputText = $("input[type='text']");

			if ('{{cfg.use}}' == 'false') {
				inputText.attr('disabled', 'disabled');
				networking.fadeTo(0, 0.4);
			}

			$(".switch-networking").on('switch-change', function(e, data){
				if(data.value){
					inputText.removeAttr('disabled');
					networking.fadeTo(400, 1);
				}
				else{
					inputText.attr('disabled', 'disabled');
					networking.fadeTo(400, 0.4);
				}
			});
		});
	</script>
{% endblock %}