{% extends "base.html" %}

{% block head %}
<script>

	/*
	* Run when VRF addition is complete.
	*/
	function vrfAdded(data) {

		if ('error' in data) {
			showDialogNotice('Operation failed', data.message);
			} else {
			$('#vrf_success_rt').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 = {
				'name': $('input[name="name"]').val(),
				'description': $('input[name="description"]').val(),
				'rt': $('input[name="rt"]').val(),
				'tags': JSON.stringify($('#tags').tagit("assignedTags"))
			};

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

			// 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; add 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_rt"></span> was successfully added.
			</div>
		</div>
	</div>
</div>

{% endblock %}