{% extends "base.html" %}

{% block head %}
<script>

	/*
	* Run when VRF edit is complete.
	*/
	function vrfEdited(data) {

		if ('error' in data) {
			showDialogNotice('Operation failed', data.message);
			} else {
			$('#vrf_success_vrf').html(data.rt);
			$('#vrf_success_container').show();
			scrollItemVisible($("#vrf_success_container"));
			$("#vrf_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="vrf_form"]').submit(function(e) {
			var data = {
				'rt': $('input[name="rt"]').val(),
				'name': $('input[name="name"]').val(),
				'description': $('input[name="description"]').val(),
				'tags': JSON.stringify($('#tags').tagit("assignedTags"))
			};

			$.getJSON('{{ h.url(controller="xhr", action="edit_vrf", id=c.edit_vrf.id) }}', data, vrfEdited);

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

		});

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

</script>
{% endblock %}

{% block content %}

<div class="page-title">
	VRF administration &mdash;&gt; edit VRF
</div>

{% include 'vrf_form.html' %}

<div id="vrf_success_container" style="display: none;">
	<div class="options-group">
		<div class="options-content">
			<h3 class="options-group-heading">Result</h3>
			<div id="vrf_success_bg" style="padding: 15px; background-color: #ccffcc;">
				The VRF <span id="vrf_success_vrf"></span> was successfully edited.
			</div>
		</div>
	</div>
</div>

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

		<div class="option">
			<dl>
				<dt>
				IPv4
				</dt>
				<dd>
				{% if c.edit_vrf.num_prefixes_v4 == 0 %}
				No IPv4 prefixes in VRF.
				{% else %}
				<canvas id="canvas_vrf_addresses_v4" style="float: right;" width="250px;" height="100"></canvas>
				VRF {{c.edit_vrf.name}} contains {{c.edit_vrf.num_prefixes_v4}} IPv4 prefixes containing a total of {{c.edit_vrf.total_addresses_v4}} addresses. {{c.edit_vrf.used_addresses_v4}} of those are in use while {{c.edit_vrf.free_addresses_v4}} are free, representing a usage of {{ (c.edit_vrf.used_addresses_v4 / c.edit_vrf.total_addresses_v4 * 100) | round(1) }}%.
				{% endif %}
				</dd>
			</dl>
		</div>

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

		<div class="option">
			<dl>
				<dt>
				IPv6
				</dt>
				<dd>
				{% if c.edit_vrf.num_prefixes_v6 == 0 %}
				No IPv6 prefixes in VRF.
				{% else %}
				<canvas id="canvas_vrf_addresses_v6" style="float: right;" width="250px;" height="100"></canvas>
				VRF {{c.edit_vrf.name}} contains {{c.edit_vrf.num_prefixes_v6}} IPv6 prefixes containing a total of {{c.edit_vrf.total_addresses_v6}} addresses. {{c.edit_vrf.used_addresses_v6}} of those are in use while {{c.edit_vrf.free_addresses_v6}} are free, representing a usage of {{ (c.edit_vrf.used_addresses_v6 / c.edit_vrf.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_vrf_addresses_v4 = $.extend(true, [], data_charts);
data_vrf_addresses_v4[0]['value'] = {{c.edit_vrf.used_addresses_v4}};
data_vrf_addresses_v4[1]['value'] = {{c.edit_vrf.free_addresses_v4}};
var data_vrf_addresses_v6 = $.extend(true, [], data_charts);
data_vrf_addresses_v6[0]['value'] = {{c.edit_vrf.used_addresses_v6}};
data_vrf_addresses_v6[1]['value'] = {{c.edit_vrf.free_addresses_v6}};

var options = { animationSteps : 20, animationEasing: "easeOutQuart" };
{% if c.edit_vrf.num_prefixes_v4 > 0 %}
var chart_vrf_addresses_v4 = new Chart($("#canvas_vrf_addresses_v4")[0].getContext("2d")).Doughnut(data_vrf_addresses_v4, options);
{% endif %}
{% if c.edit_vrf.num_prefixes_v6 > 0 %}
var chart_vrf_addresses_v6 = new Chart($("#canvas_vrf_addresses_v6")[0].getContext("2d")).Doughnut(data_vrf_addresses_v6, options);
{% endif %}

</script>

{% endblock %}