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

{% block head %}

<link rel="stylesheet" href="/datatable.css">
<script src="/jquery.dataTables.min.js"></script>

<script>

	var indent_head = Array();
	prefix_link_type = 'add_too_pool';
	var pool_id = {{ c.pool.id }};
	var implied_vrf = Object();
	{% if c.pool.vrf is none %}
	implied_vrf.id = null;
	implied_vrf.rt = null;
	implied_vrf.name = null;
	implied_vrf.description = null;
	{% else %}
	implied_vrf.id = {{ c.pool.vrf.id }};
	implied_vrf.rt = '{{ c.pool.vrf.rt }}';
	implied_vrf.name = '{{ c.pool.vrf.name }}';
	implied_vrf.description = '{{ c.pool.vrf.description }}';
	{% endif %}
	var prefix = null;

	/*
	* Is run when a prefix is selected in the list.
	*/
	function addToPool(prefix_id) {

		// Verify that prefix is not already member of a pool
		if (prefix_list[prefix_id].pool != null) {
			prefix = prefix_list[prefix_id];
			$.getJSON('/xhr/list_pool', { id: pool_id }, showPrefixInPoolDialog);
			return;
		}

		// set prefix's pool attribute in NIPAP
		data = new Object();
		data.pool = {{ c.pool.id }};
		$.getJSON('/xhr/edit_prefix/' + prefix_id, data, prefixAdded);

		$('input[name="pool_exp_method_1"]').removeAttr('checked');
		clearPrefixSearch();

	}

	/*
	* Display a dialog informing the user that the prefix which was selected
	* is already in a pool.
	*/
	function showPrefixInPoolDialog(data) {
		showDialogNotice(
		"Prefix already in pool",
		"The prefix " + prefix.display_prefix +
		" is already allocated to the pool \"" + data[0].name + "\"."
		);
	}


	/*
	* Run when prefix has been added to pool
	*/
	function prefixAdded(prefix) {

		// Error?
		if ('error' in prefix) {
			showDialogNotice("Error", prefix.message);
			return;
		}

		// display prefix in list
		$("#pool_prefix_list").append('<tr id="pool_prefix_' + prefix.id + '">');
			$("#pool_prefix_" + prefix.id).append('<td>' + prefix.display_prefix + '</td>');
			$("#pool_prefix_" + prefix.id).append('<td>' + prefix.description + '</td>');
			$("#pool_prefix_" + prefix.id).append('<td><a href="/pool/remove_prefix/{{ c.pool.id }}?prefix='+ prefix.id +'" onclick="showDialogYesNo(\'Remove ' + prefix.display_prefix + ' from pool?\', \'Are you sure you want to remove ' + prefix.display_prefix + ' from pool? You cannot undo this action.\', function () { window.location.href = \'/pool/remove_prefix/{{ c.pool.id }}?prefix='+ prefix.id +'\'; }); return false;">del</a></td>');

			// Hide all expansion boxes
			$('#prefix-alloc-method_container').hide();
			$('#from-pool_container').hide();
			$('#from-prefix_container').hide()
			$('#prefix_data_container').hide();
			$('#exp-method_container').hide();


			$('#prefix_added').html(prefix.prefix);
			$('#prefix_added_container').show();
			scrollItemVisible($("#prefix_added_container"));
			$("#prefix_added_bg").animate({ backgroundColor: "#ffffff" }, 1).delay(200).animate({ backgroundColor: "#3d9400" }, 700).delay(200).animate({ backgroundColor: "#ccffcc" }, 1000);

		}


		/*
		* Display step 2 of pool expansion procedure
		*/
		function displayStep2(e) {

			// allocate new prefix
			if (e.currentTarget.id == 'radio-create-new') {

				// fetch data for pool search box
				$.getJSON('{{ h.url(controller="xhr", action="list_pool") }}', populatePoolTable);

				prefix_link_type = 'select';
				$('#prefix_list').empty();
				$('#query_string').val('');

				$('#prefix-alloc-method_container').show();
				$('#from-prefix_container').hide();

				scrollItemVisible($("#prefix-alloc-method_container"));

				// select already existing prefix
				} else {

				prefix_link_type = 'add_to_pool';
				$('#prefix_list').empty();
				$('#query_string').val('');

				$('#prefix-alloc-method_container').hide();
				$("#from-prefix_container").show();
				$("#from-pool_container").hide();
				$("#prefix_data_container").hide();
				$("#prefix_row").hide();
				$('#prefix_length_prefix_container').hide();

				$("html,body").animate({scrollTop: $("#from-prefix_container").offset().top - 50}, 700);
			}

		}


		/*
		* Run when pool edit is complete.
		*/
		function poolEdited(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);
			}

		}


		/*
		* Things to do when page loads
		*/
		$(function () {

			/*
			* register events
			*/
			// prefix search
			$("form[name='prefix_search']").submit(function(e) {
				performPrefixSearch(true);
				e.preventDefault();
			});
			$('input[name="search_opt_parent"]').change(performPrefixSearch);
			$('input[name="search_opt_child"]').change(performPrefixSearch);
			$("#query_string").keyup(prefixSearchKey);

			// Expand pool button
			$("#exp_pool_btn").click(function() {
				$("#exp-method_container").show(); 
				scrollItemVisible($("#exp-method_container")); return false;
			});

			// Radio buttons
			$('input[name="pool_exp_method_1"]').change(displayStep2);
			$('input[name="prefix_alloc_method"]').change(showAllocContainer);
			$('input[name="edit_length"]').change(toggleLengthEdit);
			$('input[name="prefix_family"]').change(changeFamily);
			$('input[name="prefix_type"]').change(prefixTypeToggled);

			$('input[name="prefix_monitor"]').change(prefixMonitorToggled);
			prefixMonitorToggled();

			// handle the comment input field
			$("input[name='prefix_comment']").hide();
			$('#add_comment').show();
			$('#add_comment').click(function() {
				$("input[name='prefix_comment']").slideDown();
				$("#add_comment").hide();
			});

			// capture click event in VRF input field, display VRF selector
			$('input[name="prefix_vrf_btn"]').click(
			function(evt) {
				showVRFSelectorMenu(clickPrefixVRFSelector, $('input[name="prefix_vrf_btn"]'));
			}
			);

			// catch submit actions
			$('#prefix_form').submit(prefixFormSubmit);

			$("form[name='prefix_search']").submit(function(e) {
				performPrefixSearch(true);
				e.preventDefault();
			});

			// Remove prefix type 'host', as these should not be a member of a pool
			$('#radio-prefix-type-host').remove();
			$('#label-prefix-type-host').remove();

			// enable/disable the Node input
			enableNodeInput();

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

			// 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="edit_pool", id=c.pool.id) }}', data, poolEdited);

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

			});

			/*
			* Other stuff
			*/
			// TODO: add highlight when hovering prefix in list
			// TODO: Fix error when prefix is selected multiple times
			// TODO: When prefix added to pool, hide all boxes related to adding
			//       prefixes and scroll up. Also make sure that all fields are
			//       cleaned in case of the user wanting to add another prefix.

		});
	</script> 

	{% endblock %}
	{% block content %}

	<div class="page-title">
		Pool administration &mdash;&gt; edit 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 edited.
				</div>
			</div>
		</div>
	</div>

	<!-- statistics -->
	<div class="options-group">
		<div class="options-content">
			<h3 class="options-group-heading">Statistics for pool: {{ c.pool.name }}</h3>

			<div class="option">
				<dl>
					<dt>
					IPv4 prefixes
					</dt>
					<dd>
					{% if c.pool.member_prefixes_v4 == 0 %}
					No IPv4 member prefixes.
					{% elif c.pool.ipv4_default_prefix_length is none %}
					Unable to calculate number of total and free prefixes; IPv4 default prefix length is not set.
					{% else %}
					<canvas id="canvas_pool_prefixes_v4" style="float: right;" width="250px;" height="100"></canvas>
					Pool {{c.pool.name}} consists of {{c.pool.member_prefixes_v4}} member IPv4 prefixes. There are {{c.pool.used_prefixes_v4}} used IPv4 prefixes (direct subnets) and {{c.pool.free_prefixes_v4}} free prefixes of the default IPv4 prefix length ({{c.pool.ipv4_default_prefix_length}}) allowing for a total of {{c.pool.total_prefixes_v4}} prefixes.
					{% endif %}
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
					IPv6 prefixes
					</dt>
					<dd>
					{% if c.pool.member_prefixes_v6 == 0 %}
					No IPv6 member prefixes.
					{% elif c.pool.ipv6_default_prefix_length is none %}
					Unable to calculate number of total and free prefixes; IPv6 default prefix length is not set.
					{% else %}
					<canvas id="canvas_pool_prefixes_v6" style="float: right;" width="250px;" height="100"></canvas>
					Pool {{c.pool.name}} consists of {{c.pool.member_prefixes_v6}} member IPv6 prefixes. There are {{c.pool.used_prefixes_v6}} used IPv4 prefixes (direct subnets) and {{c.pool.free_prefixes_v6}} free prefixes of the default IPv6 prefix length ({{c.pool.ipv6_default_prefix_length}}) allowing for a total of {{c.pool.total_prefixes_v6}} prefixes.
					{% endif %}
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
					IPv4 addresses
					</dt>
					<dd>
					{% if c.pool.member_prefixes_v4 == 0 %}
					No IPv4 member prefixes.
					{% else %}
					<canvas id="canvas_pool_addresses_v4" style="float: right;" width="250px;" height="100"></canvas>
					Pool {{c.pool.name}} consists of {{c.pool.member_prefixes_v4}} IPv4 prefixes totalling {{c.pool.total_addresses_v4}} addresses. {{c.pool.used_addresses_v4}} addresses are in use while {{c.pool.free_addresses_v4}} are free, representing a usage of {{ (c.pool.used_addresses_v4 / c.pool.total_addresses_v4 * 100) | round(1) }}%.
					{% endif %}
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
					IPv6 addresses
					</dt>
					<dd>
					{% if c.pool.member_prefixes_v6 == 0 %}
					No IPv6 member prefixes.
					{% else %}
					<canvas id="canvas_pool_addresses_v6" style="float: right;" width="250px;" height="100"></canvas>
					Pool {{c.pool.name}} consists of {{c.pool.member_prefixes_v6}} IPv6 prefixes totalling {{c.pool.total_addresses_v6}} addresses. {{c.pool.used_addresses_v6}} addresses are in use while {{c.pool.free_addresses_v6}} are free, representing a usage of {{ (c.pool.used_addresses_v6 / c.pool.total_addresses_v6 * 100) | round(1) }}%.
					{% endif %}
					</dd>
				</dl>
			</div>
		</div>
	</div>

<script>

var data_charts = [
	{
		color: '#d74228',
		highlight: '#e74228',
		label: 'Used'
	},
	{
		color: '#368400',
		highlight: '#36a200',
		label: 'Free'
	}
	];


var data_pool_addresses_v4 = $.extend(true, [], data_charts);
data_pool_addresses_v4[0]['value'] = {{c.pool.used_addresses_v4}};
data_pool_addresses_v4[1]['value'] = {{c.pool.free_addresses_v4}};
var data_pool_addresses_v6 = $.extend(true, [], data_charts);
data_pool_addresses_v6[0]['value'] = {{c.pool.used_addresses_v6}};
data_pool_addresses_v6[1]['value'] = {{c.pool.free_addresses_v6}};

var options = { animationSteps : 20, animationEasing: "easeOutQuart" };

{% if c.pool.member_prefixes_v4 > 0 and c.pool.free_prefixes_v4 is not none %}
	var data_pool_prefixes_v4 = $.extend(true, [], data_charts);
	data_pool_prefixes_v4[0]['value'] = {{c.pool.used_prefixes_v4}};
	data_pool_prefixes_v4[1]['value'] = {{c.pool.free_prefixes_v4}};
	var chart_pool_prefixes_v4 = new Chart($("#canvas_pool_prefixes_v4")[0].getContext("2d")).Doughnut(data_pool_prefixes_v4, options);
{% endif %}
{% if c.pool.member_prefixes_v6 > 0 and c.pool.free_prefixes_v6 is not none %}
	var data_pool_prefixes_v6 = $.extend(true, [], data_charts);
	data_pool_prefixes_v6[0]['value'] = {{c.pool.used_prefixes_v6}};
	data_pool_prefixes_v6[1]['value'] = {{c.pool.free_prefixes_v6}};
	var chart_pool_prefixes_v6 = new Chart($("#canvas_pool_prefixes_v6")[0].getContext("2d")).Doughnut(data_pool_prefixes_v6, options);
{% endif %}

{% if c.pool.member_prefixes_v4 > 0 %}
var chart_pool_addresses_v4 = new Chart($("#canvas_pool_addresses_v4")[0].getContext("2d")).Doughnut(data_pool_addresses_v4, options);
{% endif %}
{% if c.pool.member_prefixes_v6 > 0 %}
var chart_pool_addresses_v6 = new Chart($("#canvas_pool_addresses_v6")[0].getContext("2d")).Doughnut(data_pool_addresses_v6, options);
{% endif %}

</script>

	<div class="options-group">
		<div class="options-content" style="position: relative;">
			<h3 class="options-group-heading">Prefixes in pool</h3>
			<div style="position: absolute; right: 20px; top: 48px; width: 100px;">
				{{ nipap.button('Expand pool', color='red', url='', id='exp_pool_btn') }}
			</div>
			<table id="pool_prefix_list" style=" margin-top: 40px; border-spacing: 0px; width: 100%;">
				<thead class="listing">
					<tr>
						<th>Prefix</th><th>Description</th><th>&nbsp;</th>
					</tr>
				</thead>
				<tbody class="listing">
					{% for prefix in c.prefix_list %}
					<tr>
						<td>{{ prefix.display_prefix }}</td>
						<td>{{ prefix.description }}</td>
						<td>
							<a href="{{ h.url(controller = 'pool', action = 'remove_prefix', id = c.pool.id, prefix = prefix.id) }}" onclick="showDialogYesNo('Remove {{ prefix.display_prefix }}?', 'Are you sure you want to remove {{ prefix.display_prefix }} from pool? You cannot undo this action.', function () { window.location.href = '{{ h.url(controller = "pool", action = "remove_prefix", id = c.pool.id, prefix = prefix.id) }}'; }); return false;">del</a>
						</td>
					</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
	</div>

	<!--

	POOL EXPANSION METHOD

	-->

	<div class="options-group" style="display: none;" id="exp-method_container">
		<div class="options-content">
			<h3 class="options-group-heading">Pool expansion method</h3>
			<div class="option">
				<dl>
					<dt style="text-align: left;">
					<input id="radio-create-new" type="radio" name="pool_exp_method_1" value="create-new">
					<label for="radio-create-new">Allocate new</label>
					</dt>
					<dd>
					Create a new prefix and allocate it to this pool.
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt style="text-align: left;">
					<input id="radio-use-existing" type="radio" name="pool_exp_method_1" value="use-existing">
					<label for="radio-use-existing">Add existing</label>
					</dt>
					<dd>
					Add an already existing prefix to the pool.
					</dd>
				</dl>
			</div>

		</div>
	</div>

	{% include 'prefix_add_containers.html' %}

	<div id="prefix_added_container" style="display: none;">
		<div class="options-group">
			<div class="options-content">
				<h3 class="options-group-heading">Result</h3>
				<div id="prefix_added_bg" style="padding: 15px; background-color: #ccffcc;">
					The pool was successfully expanded with the prefix <span id="prefix_added"></span>.
				</div>
			</div>
		</div>
	</div>

	{% endblock %}