{% extends "base.html" %}
{% set page = 'pools' %}

{% block head %}
<script>

	/*
	* Run when pool addition is complete.
	*/
	function poolAdded(data) {

		if ('error' in data) {
			showDialogNotice('Operation failed', data.message);
			} else {
			$('#pool_success_name').html(data.name);
			$('#pool_success_container').show();
			scrollItemVisible($("#pool_success_container"));
			$("#pool_success_bg").animate({ backgroundColor: "#ffffff" }, 1).delay(200).animate({ backgroundColor: "#3d9400" }, 700).delay(200).animate({ backgroundColor: "#ccffcc" }, 1000);
		}

	}


	$(function() {
		// Capture submit form event
		$('form[name="pool_form"]').submit(function(e) {
			var data = {
				'name': $('input[name="name"]').val(),
				'description': $('input[name="description"]').val(),
				'default_type': $('input[name="default_type"]:checked').val(),
				'ipv4_default_prefix_length': $('input[name="ipv4_default_prefix_length"]').val(),
				'ipv6_default_prefix_length': $('input[name="ipv6_default_prefix_length"]').val(),
				'tags': JSON.stringify($('#tags').tagit("assignedTags"))
			};

			$.getJSON('{{ h.url(controller="xhr", action="add_pool") }}', data, poolAdded);

			// prevent default action ("ordinary" HTTP POST)
			e.preventDefault();

		});

		// tags
		$("#tags").tagit({
			allowSpaces: true,
			removeConfirmation: true
		});
	});

</script>
{% endblock %}

{% block content %}

<div class="page-title">
	Pool administration &mdash;&gt; add pool
</div>

{% include 'pool_form.html' %}

<div id="pool_success_container" style="display: none;">
	<div class="options-group">
		<div class="options-content">
			<h3 class="options-group-heading">Result</h3>
			<div id="pool_success_bg" style="padding: 15px; background-color: #ccffcc;">
				The pool <span id="pool_success_name"></span> was successfully added.
			</div>
		</div>
	</div>
</div>

{% endblock %}