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

{% block head %}
<script>

	/*
	* Run when prefix edit is complete.
	*/
	function prefixEdited(data) {

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

	}

	function performPrefixEdit() {

		var data = {
			'prefix': $('input[name="prefix_prefix"]').val(),
			'description': $('input[name="prefix_description"]').val(),
			'node': $('input[name="prefix_node"]').val(),
			'country': $('input[name="prefix_country"]').val(),
			'order_id': $('input[name="prefix_order_id"]').val(),
			'customer_id': $('input[name="prefix_customer_id"]').val(),
			'vrf': $('input[name="prefix_vrf_id"]').val(),
			'comment': $('input[name="prefix_comment"]').val(),
			'alarm_priority': $('input[name="prefix_alarm_priority"]:checked').val(),
			'vlan': $('input[name="prefix_vlan"]').val(),
			'status': $('select[name="prefix_status"]').val(),
			'tags': $("#tags").tagit("assignedTags")
		};

		if ($('input[name="prefix_monitor"]').is(':checked')) {
			data.monitor = 'true';
			} else {
			data.monitor = 'false';
		}

		if ('{{ c.prefix.type }}' != 'host') {
			data.type = $('input[name="prefix_type"]:checked').val();
		}
		data['tags'] = JSON.stringify($('#tags').tagit('assignedTags'));

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

	}


	$(function() {
		$('#prefix_data_container').show()
		$('#prefix-row').show()
		// Set text on submit button to "Save" instead of "Add", since we
		// are modifying existing prefix.
		$("#prefix_form_submit_button").val("Save");
		// Set form action to edit
		$("#prefix_form").attr("action", "{{ h.url(controller="prefix", action="edit", id=c.prefix.id) }}");

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

		// Capture submit form event
		$('#prefix_form').submit(function(e) {
			{% if c.prefix.authoritative_source != 'nipap' %}
			dialog = showDialogYesNo(
			'Confirm prefix edit',
			'The prefix {{ c.prefix.prefix }} is managed by ' +
			'\'{{ c.prefix.authoritative_source }}\'.<br><br>' +
			'Are you sure you want to edit it?',
			function() { performPrefixEdit(); $(this).dialog("close"); }
			);
			{% else%}
			performPrefixEdit();
			{% endif %}

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

		});

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

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

		// 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"]'));
		}
		);

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

	});

</script>
{% endblock %}

{% block content %}

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

{% include 'prefix_form.html' %}

<div id="prefix_success_container" style="display: none;">
	<div class="options-group">
		<div class="options-content">
			<h3 class="options-group-heading">Result</h3>
			<div id="prefix_success_bg" style="padding: 15px; background-color: #ccffcc;">
				The prefix <span id="prefix_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 prefix: {{ c.prefix.prefix }}</h3>

		<div class="option">
			<dl>
				<dt>
				</dt>
				<dd>
				<canvas id="canvas_prefix_addresses" style="float: right;" width="250px;" height="100"></canvas>
				Prefix {{c.prefix.prefix}} contains {{c.prefix.total_addresses}} addresses out of which {{c.prefix.used_addresses}} are in use while {{c.prefix.free_addresses}} are free, representing a usage of {{ (c.prefix.used_addresses / c.prefix.total_addresses * 100) | round(1) }}%.
				</dd>
			</dl>
		</div>

	</div>
</div>

<script>

var data_prefix_addresses = [
	{
		value: {{c.prefix.used_addresses}},
		color: '#d74228',
		highlight: '#e74228',
		label: 'Used'
	},
	{
		value: {{c.prefix.free_addresses}},
		color: '#368400',
		highlight: '#36a200',
		label: 'Free'
	}
	];


var options = { animationSteps : 20, animationEasing: "easeOutQuart" };
var chart_prefix_addresses = new Chart($("#canvas_prefix_addresses")[0].getContext("2d")).Doughnut(data_prefix_addresses, options);

</script>

{% endblock %}