<!--// $Id$ //-->

<style>

	.tab-beautify td { padding: 3px; }
	.tab-beautify tr td:nth-child(2) {
		font-weight: bold;
		white-space: nowrap;
	}

	#network-connection > * {
		margin-top: 0.2em;
		margin-bottom: 0.2em;
	}

	.cell-flex {
		display: flex;
		flex-wrap: wrap;
	}

	#netdev {
		max-width: 250px;
	}

	@media screen and (max-width: 500px) {
		.cell-flex > div select {
			max-width: 185px;
			white-space: normal;
		}

		#netdev {
			max-width: 185px;
			white-space: normal;
		}

		.cell-flex > div {
			max-width: 165px;
		}
	}

	@media screen and (max-width: 420px) {
		.tab-beautify tr td:nth-child(2) {
			white-space: normal;
		}

		.lms-ui-wysiwyg-editor textarea{
			max-width: 200px;
		}

		.ui-selectmenu-button.ui-button {
			min-width: 12em;
			white-space: normal;
		}
	}

</style>

{include file="google-maps.html"}
<form name="editnode" id="editnode" method="POST" action="?m=nodeedit&id={$nodeinfo.id}">
<input type="submit" class="hiddenbtn">
<input type="hidden" name="nodeedit[id]" value="{$nodeinfo.id}">

<table class="lmsbox">
    <thead>
		<tr>
			<td style="width: 99%;" colspan="3">
				{icon name="node"}
				<input type="text" name="nodeedit[name]" value="{$nodeinfo.name}" maxlength="32" size="30"
					required {tip trigger="name" bold=1}>
				<strong>(#{$nodeinfo.id})</strong>
			</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="width: 100%;" colspan="3" class="container">
				<table style="width: 100%;" cellpadding="0">
					<tr>
						<td class="tab-beautify lmsbox-panels">
							<div class="lmsbox-panel">
								<table style="width: 100%;" cellpadding="3">
									{block name="nodeedit-leftcolumn"}
									<colgroup>
										<col style="width: 1%;">
										<col style="width: 1%;">
										<col style="width: 98%;">
									</colgroup>

									<tr>
										<td>
											{icon name="network"}
										</td>
										<td>
											{trans("Network")}
										</td>
										<td class="cell-flex">
											<div>
												<select size="1" name="nodeedit[netid]" id="netid"
													{tip class="lms-ui-advanced-select-test" trigger="netid"}>
													<option value="0">{trans("— automatic selection —")}</option>
													{foreach $networks as $net}
														<option value="{$net.id}" data-pubnetid="{$net.pubnetid}"
															{if $net.id == $nodeinfo.netid} selected{/if}
															{if $net.disabled == 1} class="lms-ui-alert"{/if}>{$net.name|truncate:20:"":true}: {$net.address}/{$net.prefix}</option>
													{/foreach}
												</select>
												{if ConfigHelper::checkConfig('phpui.show_assigned_networks_only') && ConfigHelper::checkConfig('nodes.public_ip', ConfigHelper::checkConfig('phpui.public_ip', true))}
													<script>

														$('#netid').change(function() {
															var pubnetid = parseInt($('option:selected', this).attr('data-pubnetid'));
															if (pubnetid) {
																$('[name="nodeedit[pubnetid]"]').val(0);
															}
														});

													</script>
												{/if}
												<label>
													<input type="checkbox" name="nodeedit[wholenetwork]" value="1"
														id="wholenetwork"
														{if $nodeinfo.wholenetwork} checked{/if}>
													{trans("the whole network")}
												</label>
											</div>
										</td>
									</tr>

									<tr>
										<td>
											{icon name="routed"}
										</td>
										<td>
											{trans("IP address")}
										</td>
										<td class="cell-flex">
											<div>
												<input type="text" name="nodeedit[ipaddr]" id="ipaddr" value="{$nodeinfo.ipaddr}" required
													data-manually-changed="0"
													{tip trigger="ipaddr"}>
												{button type="link" onClick="return ipchoosewin({
														ipelem: document.editnode['nodeedit[ipaddr]'],
														ip: document.editnode['nodeedit[ipaddr]'].value,
														netelem: document.editnode['nodeedit[netid]'],
														netid: document.editnode['nodeedit[netid]'].value
													});" tip="Click to select IP from the list"
													icon="next"}
											</div>
											{button type="link" id="get-first-free-address" icon="download"
												label="Select first free address"}
										</td>
									</tr>

									{if ConfigHelper::checkConfig('nodes.public_ip', ConfigHelper::checkConfig('phpui.public_ip', true))}
										<tr>
											<td>
												{icon name="routed"}
											</td>
											<td>
												{trans("Pub. IP address")}
											</td>
											<td class="cell-flex">
												<div>
													<input type="hidden" name="nodeedit[pubnetid]"
														value="{if $nodeinfo.pubnetid}{$nodeinfo.pubnetid}{else}0{/if}">
													<input type="text" name="nodeedit[ipaddr_pub]"
														{if $nodeinfo.ipaddr_pub != "0.0.0.0"} value="{$nodeinfo.ipaddr_pub}"{/if}
														{tip trigger="ipaddr_pub"}>
													{button type="link" onClick="return ipchoosewin({
															ipelem: document.editnode['nodeedit[ipaddr_pub]'],
															ip: document.editnode['nodeedit[ipaddr_pub]'].value,
															netelem: document.editnode['nodeedit[pubnetid]'],
															netid: document.editnode['nodeedit[pubnetid]'].value,
															privnetid: document.editnode['nodeedit[netid]'].value
														});" tip="Click to select IP from the list"
														icon="next"}
												</div>
											</td>
										</tr>
									{/if}

									<tr>
										<td>
											{icon name="mac"}
										</td>
										<td>
											{trans("MAC address")}
										</td>
										<td class="lms-ui-mac-address-selection">
											{mac_address_selection form="nodeedit" macs=$nodeinfo.macs node_empty_mac=$node_empty_mac}
										</td>
									</tr>

									<tr>
										<td>
											{icon name="login"}
										</td>
										<td>
											{trans("<!node>Login")}
										</td>
										<td>
											<input type="text" name="nodeedit[login]" value="{$nodeinfo.login|default:""|escape}"
												{tip trigger="login"}>
										</td>
									</tr>

									<tr>
										<td>
											{icon name="password"}
										</td>
										<td>
											{trans("Password")}
										</td>
										<td>
											<input type="text" name="nodeedit[passwd]" value="{$nodeinfo.passwd|escape}"
												id="passwordcontainer" {tip trigger="passwd"}>
											{button type="link" id="genpasswd" icon="next"
												tip="Click to generate random password"}
										</td>
									</tr>

									{if $netdevices}
										<tr>
											<td>
												{icon name="netdev"}
											</td>
											<td>
												{trans("Network device")}
											</td>
											<td class="cell-flex">
												<div id="network-connection">
													{button type="link" icon="search" tip="Search device"
														onclick="return netDevChooseWin(document.editnode.elements['nodeedit[netdev]']);"}

													<select size="1" name="nodeedit[netdev]" id="netdev" {tip trigger="netdev" class="lms-ui-advanced-select-test"}
															{if ConfigHelper::checkConfig('nodes.network_device_connection_required', ConfigHelper::checkConfig('phpui.node_to_network_device_connection_required'))} required{/if}>
														<option value="0"{if !$nodeinfo.netdev} selected{/if}>— {trans("no device")} —</option>
														{foreach $netdevices as $netdev}
															<option value="{$netdev.id}"
																{if $nodeinfo.netdev == $netdev.id} selected{/if}
																>{$netdev.name}{if $netdev.producer} / {$netdev.producer}{/if}{if $netdev.location} ({$netdev.location}){/if}</option>
														{/foreach}
													</select>

													{button type="link" icon="map"
														onClick="return netdevfrommapchoosewin(document.editnode.elements['nodeedit[netdev]']);"
														tip="Click to select network device from map"}

													<input type="text" name="nodeedit[port]"
														value="{if $nodeinfo.port}{$nodeinfo.port}{/if}" size="2"
														{tip text="Enter port number in device (optional)" trigger="port"}>
													<br>

													<select name="nodeedit[linktype]" id="linktype"
														{tip trigger="linktype" text="Select link type"}>
														{foreach $_LINKTECHNOLOGIES as $linktype => $linktech}
															<option value="{$linktype}"{if $linktype == $nodeinfo.linktype} selected{/if}>{$_LINKTYPES[$linktype]}</option>
														{/foreach}
													</select>

													<select name="nodeedit[radiosector]" id="radiosector"
														{tip trigger="radiosector" text="Select radio sector"}
														{if $nodeinfo.linktype != $smarty.const.LINKTYPE_WIRELESS} style="display: none;"{/if}>
														<option value="0">{trans("— none —")}</option>
														{foreach $nodeinfo.radiosectors as $radiosector}
															<option value="{$radiosector.id}"
																{if $radiosector.id == $nodeinfo.linkradiosector} selected{/if}
																>{$radiosector.name}</option>
														{/foreach}
													</select>

													<select name="nodeedit[linktechnology]" id="linktechnology"
														{tip trigger="linktechnology" text="Select link technology"}>
														<option value="0">{trans("— unknown —")}</option>
														{foreach $_LINKTECHNOLOGIES[$nodeinfo.linktype] as $linktechnologyidx => $linktechnology}
															<option value="{$linktechnologyidx}"
																{if $linktechnologyidx == $nodeinfo.linktechnology} selected{/if}
																>{$linktechnology}</option>
														{/foreach}
													</select>

													<select name="nodeedit[linkspeed]" id="linkspeed"
														{tip trigger="linkspeed" text="Select link speed"}>
														{foreach $_LINKSPEEDS as $key => $item}
															<option value="{$key}"
																{if $key == $nodeinfo.linkspeed} selected{/if}
																>{$item}</option>
														{/foreach}
													</select>
												</div>
											</td>
										</tr>
									{/if}

									<tr>
										<td>
											{icon name="invproject"}
										</td>
										<td>
											{trans("Investment project")}
										</td>
										<td>
											<select name="nodeedit[invprojectid]" id="project" value="{$nodeinfo.invprojectid}">
												<option value="-2" {if $nodeinfo.invprojectid == '-2'} selected{/if}
													>{trans("— none —")}</option>
												<option value="-1" {if $nodeinfo.invprojectid == '-1'} selected{/if}
													>{trans("New project")}</option>
												<option value="1" {if $nodeinfo.invprojectid == '1'} selected{/if}
													>{trans("From root device")}</option>
												{foreach $NNprojects as $project}
													<option value="{$project.id}"
														{if ($nodeinfo.invprojectid == $project.id)} selected{/if}
														>{$project.name|escape}</option>
												{/foreach}
											</select>
											<input type="text" name="nodeedit[projectname]" value="{$nodeinfo.projectname|default:""|escape}"
												{tip text="Enter new project name" trigger="projectname" } id="projectname"
												{if !isset($nodeinfo.invprojectid) || $nodeinfo.invprojectid != -1} style="display: none;"{/if}>
										</td>
									</tr>

									<tr>
										<td>
											{icon name="customer"}
										</td>
										<td>
											{trans("Customer")}
										</td>
										<td class="cell-flex">
											<div>
												{customerlist
													form        = "editnode"
													customers   = $customers
													selected    = $nodeinfo.ownerid
													selectname  = "nodeedit[customerid]"
													select_id   = "customerid_select"
													inputname   = "nodeedit[ownerid]"
													input_id    = "customerid_input"
													firstoption = ""
													selecttip   = "Assign node to customer"
													required    = true
													customOnChange = "customer_change();"
													version = 2
												}
											</div>
										</td>
									</tr>

									<tr>
										<td>
											{icon name="home"}
										</td>
										<td>
											{trans("Location")}
										</td>
										<td>
											{if $nodeinfo.address_id && $nodeinfo.ownerid}
												{$selected_address_id = $nodeinfo.address_id}
											{else}
												{$selected_address_id = null}
											{/if}
											{include file="customer/customeraddresses.html" id="customer_addresses" name="nodeedit[address_id]"
												trigger="nodeedit[address_id]" selected_address_id=$selected_address_id}
										</td>
									</tr>

									<tr>
										<td>
											{icon name="options"}
										</td>
										<td>
											{trans("Options")}
										</td>
										<td>
											<label>
												<input type="checkbox" name="nodeedit[chkmac]" value="1" id="chkmac"
													{tip text="Enable/disable MAC address checking" trigger="chkmac"}
													{if !isset($nodeinfo.chkmac) || $nodeinfo.chkmac} checked{/if}>
												{trans("MAC checking")}
											</label>

											<label>
												<input type="checkbox" name="nodeedit[halfduplex]" value="1" id="duplex"
													{if $nodeinfo.halfduplex} checked{/if}
													{tip text="Select transmission mode"}>
												{trans("Half duplex")}
											</label>
										</td>
									</tr>

									<tr>
										<td>
											{icon name="netdev"}
										</td>
										<td>
											{trans("Type")}
										</td>
										<td>
											{foreach $_SESSIONTYPES as $idx => $sessiontype}
												<label {tip text="`$sessiontype.tip`"}>
													<input type="checkbox" name="nodeedit[authtype][{$idx}]" value="{$idx}"
														id="authtype{$idx}" {tip trigger="authtype`$idx`"}
														{if ($nodeinfo.authtype & $idx) == $idx} checked{/if}>
													{$sessiontype.label}
												</label><br>
											{/foreach}
										</td>
									</tr>
									{/block}
								</table>
							</div>
							<div class="lmsbox-panel">
								<table style="width: 100%;" class="tab-beautify">
									{block name="nodeedit-rightcolumn"}
									<colgroup>
										<col style="width: 1%;">
										<col style="width: 1%;">
										<col style="width: 98%;">
									</colgroup>

									<tr>
										<td>
											{icon name="network"}
										</td>
										<td colspan="2" class="font-normal">
											<span class="lms-ui-button" id="set_gps">
												{trans("Determine GPS coordinates automatically")}
											</span>
											&nbsp;
											{reset_to_defaults target="#longitude,#latitude"}
										</td>
									</tr>

									<tr>
										<td>
											{icon name="location"}
										</td>
										<td class="nobr">
											<strong>{trans("GPS longitude")}</strong>
										</td>
										<td>
											<input type="text" id="longitude" name="nodeedit[longitude]"
												value="{if $nodeinfo.longitude}{$nodeinfo.longitude}{else}{/if}"
												{tip trigger="longitude"}>
											{button type="link" icon="map" tip="Click to select GPS coordinates from map"
												onClick="return gpscoordschoosewin(document.editnode.elements['nodeedit[longitude]'], document.editnode.elements['nodeedit[latitude]']);"}
										</td>
									</tr>

									<tr>
										<td>
											{icon name="location"}
										</td>
										<td class="nobr">
											<strong>{trans("GPS latitude")}</strong>
										</td>
										<td>
											<input type="text" id="latitude" name="nodeedit[latitude]"
												value="{if $nodeinfo.latitude}{$nodeinfo.latitude}{else}{/if}"
												{tip trigger="latitude"}>
											{button type="link" icon="map" tip="Click to select GPS coordinates from map"
												onClick="return gpscoordschoosewin(document.editnode.elements['nodeedit[longitude]'], document.editnode.elements['nodeedit[latitude]']);"}
										</td>
									</tr>

									<tr>
										<td>
											{icon name="info"}
										</td>
										<td colspan="2">
											<textarea name="nodeedit[info]" class="lms-ui-wysiwyg-editor"
												cols="50" rows="5"
												{tip text="Enter additional information (optional)"}
												{if isset($nodeinfo.wysiwyg.info)} data-wysiwyg="{$nodeinfo.wysiwyg.info}"{/if}
												>{$nodeinfo.info}</textarea>
										</td>
									</tr>

									<tr>
										<td>
											{if $nodeinfo.access}
												{$icon = "connected"}
											{else}
												{$icon = "disconnected"}
											{/if}
											{icon name=$icon id="statusico"}
										</td>
										<td>
											{trans("Status")}
										</td>
										<td>
											<select size="1" name="nodeedit[access]" id="status"
												{tip trigger="access"}>
												<option value="1"{if $nodeinfo.access} selected{/if}
													>{trans("connected<!singular>")}</option>
												<option value="0"{if !$nodeinfo.access} selected{/if}
													>{trans("disconnected<!singular>")}</option>
											</select>
										</td>
									</tr>

									<tr>
										<td>
											{if $nodeinfo.warning}
												{$icon = "warnon"}
											{else}
												{$icon = "warnoff"}
											{/if}
											{icon name=$icon id="noticesico"}
										</td>
										<td>
										   {trans("Notices")}
										</td>
										<td>
											<select size="1" name="nodeedit[warning]" id="notices">
												<option value="1"{if $nodeinfo.warning} selected{/if}
													>{trans("enabled<!node>")}</option>
												<option value="0"{if !$nodeinfo.warning} selected{/if}
													>{trans("disabled<!node>")}</option>
											</select>
										</td>
									</tr>

									<tr>
										<td>
											{icon name="user"}
										</td>
										<td>
											{trans("Created")}
											<br>
											{trans("Modified")}
										</td>
										<td class="cell-flex">
											<div>
												{$nodeinfo.createdby|escape}, {$nodeinfo.creationdateh}
												<br>
												{if $nodeinfo.moddate}{$nodeinfo.modifiedby|escape}, {$nodeinfo.moddateh}{else}-{/if}
											</div>
										</td>
									</tr>
									{/block}
								</table>
							</div>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td class="lms-ui-box-buttons" colspan="3">
				{button type="submit" icon="save" label="Submit"}
				{button icon="cancel" label="Cancel" href="{$backurl}"}
			</td>
		</tr>
    </tbody>
</table>
</form>

<script>

	function first_free_address_received(ip) {
		var ipAddrElem = $('#ipaddr');
		if (typeof(ip) === 'string') {
			ipAddrElem.val(ip)
				.removeClass('lms-ui-warning')
				.removeAttr('data-tooltip')
				.attr({
					'data-manually-changed': '0',
					'title': null
				});
		} else {
			ipAddrElem.addClass('lms-ui-warning')
				.removeAttr('data-tooltip')
				.attr('title', $t("No free addresses in selected network!"));
		}
	}

	$(function() {
		$('[name="nodeedit[name]"]').focus();

		$('#get-first-free-address').click(function() {
			var netid = parseInt($('#netid').val());
			if (!netid) {
				return;
			}
			xajax_getFirstFreeAddress(netid);
		});

		{if ConfigHelper::checkConfig('nodes.auto_get_first_free_address')}
			$('#ipaddr').on('change keyup', function() {
				$(this).attr('data-manually-changed', '1');
			});

			$('#netid').change(function() {
				var netid = parseInt($(this).val());
				if ($('#ipaddr').attr('data-manually-changed') === '0') {
					xajax_getFirstFreeAddress(netid);
				}
			});
		{/if}

		$('#project').change(function() {
			$('#projectname').toggle(parseInt($(this).val()) == -1);
		});

		$('#notices').change(function() {
			var notices = parseInt($(this).val());
			$('#noticesico').toggleClass('lms-ui-icon-warnon', notices).toggleClass('lms-ui-icon-warnoff', !notices);
		});

		$('#status').change(function() {
			var status = parseInt($(this).val());
			$('#statusico').toggleClass('lms-ui-icon-connected', status).toggleClass('lms-ui-icon-disconnected', !status);
		});

		$('#genpasswd').click(function() {
			var length = {ConfigHelper::getConfig('nodes.password_length', ConfigHelper::getConfig('phpui.node_password_length', ConfigHelper::getConfig('phpui.nodepassword_length', '16')))};
			if (length > 32) {
				length = 32;
			}
			if ($('#passwordcontainer').val().length > 0) {
				confirmDialog($t("Are you sure, you want to generate new password?"), this).done(function() {
					$( '#passwordcontainer' ).val(generate_random_string(length, "{ConfigHelper::getConfig('nodes.password_allowed_characters', ConfigHelper::getConfig('phpui.node_password_allowed_characters', ConfigHelper::getConfig('phpui.nodepassword_allowed_characters', 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789')))|replace:'"':'\"'}"));
				});
			} else {
				$( '#passwordcontainer' ).val(generate_random_string(length, "{ConfigHelper::getConfig('nodes.password_allowed_characters', ConfigHelper::getConfig('phpui.node_password_allowed_characters', ConfigHelper::getConfig('phpui.nodepassword_allowed_characters', 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789')))|replace:'"':'\"'}"));
			}
			return false;
		});

		$('#set_gps').click( function() {
			if ($('#customer_addresses').val()) {
				xajax_get_gps_coordinates({
					address_id: $('#customer_addresses').val()
				}, '#latitude', '#longitude');
			}
		});

		$('#netdev').change(function() {
			if (parseInt($('#linktype').val()) == {$smarty.const.LINKTYPE_WIRELESS}) {
				$('#linktype,#radiosector,#linktechnology,#linkspeed').prop('disabled', true);
				xajax_getRadioSectors($(this).val(), $('#linktechnology').val());
			}
		});

		$('#linktype').change(function() {
			linktype = parseInt($(this).val());
			var select = $('#linktechnology');
			var selected = parseInt($('#netdev').val());
			var html = '<option value="0">{trans("— unknown —")}</option>';
			switch (linktype) {
				case 0:
				{foreach $_LINKTECHNOLOGIES[$smarty.const.LINKTYPE_WIRE] as $linktechnologyidx => $linktechnology}
					html += '<option value="{$linktechnologyidx}">{$linktechnology}</option>';
				{/foreach}
					break;
				case 1:
				{foreach $_LINKTECHNOLOGIES[$smarty.const.LINKTYPE_WIRELESS] as $linktechnologyidx => $linktechnology}
					html += '<option value="{$linktechnologyidx}">{$linktechnology}</option>';
				{/foreach}
					break;
				case 2:
				{foreach $_LINKTECHNOLOGIES[$smarty.const.LINKTYPE_FIBER] as $linktechnologyidx => $linktechnology}
					html += '<option value="{$linktechnologyidx}">{$linktechnology}</option>';
				{/foreach}
					break;
			}
			select.html(html);
			$('#radiosector').toggle(linktype == {$smarty.const.LINKTYPE_WIRELESS});

			if (linktype == {$smarty.const.LINKTYPE_WIRELESS} && selected) {
				$('#radiosector').prop('disabled', true);
				xajax_getRadioSectors(selected);
			}
		});

		$('#linktechnology').change(function() {
			technology = parseInt($(this).val());
			var linktype = $('#linktype').val();
			if (linktype != {$smarty.const.LINKTYPE_WIRELESS}) {
				return;
			}
			var netdev = $('#netdev').val();
			if (netdev !== undefined) {
				$('#radiosector').prop('disabled', true);
				xajax_getRadioSectors(netdev, technology);
			}
		});

		$('#wholenetwork').change(function() {
			var wholenetwork = $(this).prop('checked');
			$('[name="nodeedit[ipaddr]"],[name="nodeedit[ipaddr_pub]"]').closest('tr').toggle(!wholenetwork);
			$('[name="nodeedit[ipaddr]"]').prop('required', !wholenetwork);
		}).change();
	});

	function radio_sectors_received(radiosectors) {
		var select = $('#radiosector');
		var oldValue = select.val();
		var html = '<option value="0">{trans("— none —")}</option>';
		if (radiosectors !== null) {
			$.each(radiosectors, function(index, elem) {
				html += '<option value="' + elem.id + '"' + (elem.id == oldValue ? ' selected' : '') + '>' + elem.name + '</option>';
			});
		}
		select.html(html);
		$('#linktype,#radiosector,#linktechnology,#linkspeed').prop('disabled', false);
	}

	xajax_getRadioSectors({$nodeinfo.netdev}, {$nodeinfo.linktechnology});

    initAdvancedSelectsTest('#customer_addresses');

    /*!
     * \brief Update addresses list on customer input change.
     */
    function customer_change() {
        getCustomerAddresses( $("#customerid_input").val(), function(addresses) {
            setAddressList('#customer_addresses', addresses);
        });
    }

</script>
