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

{% block head %}
<link rel="stylesheet" href="/datatable.css">
<script src="/jquery.dataTables.min.js"></script>
<script>

	prefix_link_type = 'select';

	var alloc_method = '';


	/*
	* Run when prefix addition is complete.
	*/
	function prefixAdded(data) {

		if ('error' in data) {
			showDialogNotice('Operation failed', data.message);
			} else {
			$('#prefix_added_container').show();

			$('#prefix_added_list').prepend('<div id="prefix_added_entry' + data.id + '" class="prefix_added_entry">Added prefix: ' + data.prefix + ' - ' + data.description + '</div>');
			scrollItemVisible($("#prefix_added_entry" + data.id));
			$("#prefix_added_entry" + data.id).animate({ backgroundColor: "#ccffcc" }, 1).delay(200).animate({ backgroundColor: "#3d9400" }, 700).delay(200).animate({ backgroundColor: "#ccffcc" }, 1000);
		}

	}


	/*
	* Things to do on page load.
	*/
	$(function () {
		// register function for pageshow event
		$(window).on('pageshow', function(event) {
			// reset radio button for prefix allocation method
			$('input[name="prefix_alloc_method"]').removeAttr('checked');
		});

		$.getJSON('{{ h.url(controller="xhr", action="list_pool") }}', populatePoolTable);
		$('#prefix-alloc-method_container').show();

		// Enable actions on radio buttons
		$('input[name="prefix_alloc_method"]').change(showAllocContainer);
		$('input[name="edit_length"]').change(toggleLengthEdit);

		// Enable action on the adress family select box
		$('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 events on default prefix type display.
		$('#default_prefix_type').click(function () {
			$('#default_prefix_type').hide();
			$('#prefix_type_selection').slideDown();
		});

		// 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"]'));
			evt.preventDefault();
		}
		);

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

		$("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);

		// enable/disable node input if needed
		enableNodeInput();
		$('input[name="prefix_prefix"]').keyup(enableNodeInput);

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

	});
</script>
{% endblock %}

{% block content %}

<div class="page-title">
	Prefix administration &mdash;&gt; add prefix
</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_list">
			</div>
		</div>
	</div>
</div>

{% endblock %}