<!--// $Id$ //-->
{$disable_active_links=ConfigHelper::getConfig('nodes.disable_active_links_in_info', ConfigHelper::getConfig('phpui.disable_active_links_in_nodeinfo', 'true'))}

{$xajax}

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

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

	.cell-flex > *:not(:first-child) {
		margin-left: 0.5em;
	}

	.mac-address {
		cursor: pointer;
	}

	.mac-address:hover {
		box-shadow: 0px 0px 1px 1px black;
	}

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

		.cell-flex > div {
			max-width: 145px;
			white-space: normal;
		}

		.cell-flex > span {
			max-width: 145px;
			white-space: normal;
		}

		.cell-flex {
			width: 145px;
			white-space: normal;
		}
	}

</style>

<table class="lmsbox">
    <thead>
		<tr>
			<td style="width: 99%;" colspan="3">
				{icon name="node"}
				<strong>{$nodeinfo.name} (#{$nodeinfo.id})</strong>
			</td>
		</tr>
    </thead>
    <tbody>
		<tr>
			<td colspan="3" class="container">
				<table style="width: 100%;" cellpadding="0">
					<tr>
						<td class="tab-beautify lmsbox-panels">
							<div class="lmsbox-panel">
								<table>
									<colgroup>
										<col style="width: 1%;">
										<col style="width: 1%;">
										<col style="width: 98%;">
									</colgroup>

									{block name="nodeinfobox-leftcolumn"}
									<tr>
										<td>
											{icon name="network"}
										</td>
										<td>
											{trans("Network")}
										</td>
										<td class="cell-flex">
											<span>
												<a href="?m=netinfo&id={$nodeinfo.netid}">
													{$nodeinfo.netname}
												</a>
											</span>
										</td>
									</tr>
									<tr>
										<td>
											{icon name="routed" class="lms-ui-button-clipboard fa-fw" data_clipboard_text=$nodeinfo.ip}
										</td>
										<td>
											{trans("IP address")}
										</td>
										<td>
											<a href="javascript:ping_popup('{$nodeinfo.ip}')">{$nodeinfo.ip}</a>
										</td>
									</tr>

									{if $nodeinfo.ip_pub != "0.0.0.0"}
										<tr>
											<td>
												{icon name="routed" class="lms-ui-button-clipboard fa-fw" data_clipboard_text=$nodeinfo.ip_pub}
											</td>
											<td>
												{trans("Pub. IP address")}
											</td>
											<td>
												<a href="javascript:ping_popup('{$nodeinfo.ip_pub}')">{$nodeinfo.ip_pub}</a>
											</td>
										</tr>
									{/if}

									{assign var="counter" value=0}
									{$macs = array()}
									{foreach $nodeinfo.macs as $item}
										<tr>
											<td>
												{icon name="mac" class="lms-ui-button-clipboard mac-address-copy-to-clipboard fa-fw" data_clipboard_handler="1"}
											</td>
											<td>
												{trans("MAC address")}
											</td>
											<td>
												<span id="mac{$counter}" class="mac-address"
													{tip text="Change the format of presentation of the MAC address."}>
													{$item.mac}
												</span>
												{if $item.producer}({$item.producer}){/if}
												{$macs[]=$item.mac}
											</td>
										</tr>
										{math equation="x+1" x=$counter assign="counter"}
									{/foreach}

									{if $nodeinfo.login}
										<tr>
											<td>
												{icon name="login"}
											</td>
											<td>
												{trans("<!node>Login")}
											</td>
											<td>
												{$nodeinfo.login|escape}
												{button type="link" icon="clipboard" class="lms-ui-button-clipboard"
													data_clipboard_text="{$nodeinfo.login|escape}"}
											</td>
										</tr>
									{/if}

									{if $nodeinfo.passwd}
										<tr>
											<td>
												{icon name="password"}
											</td>
											<td>
												{trans("Password")}
											</td>
											<td>
												{if !ConfigHelper::checkConfig('phpui.protect_passwords')}
													{$nodeinfo.passwd}
												{/if}
												{button type="link" icon="clipboard" class="lms-ui-button-clipboard"
													data_clipboard_text="{$nodeinfo.passwd|escape}"}
											</td>
										</tr>
									{/if}

									{if $nodeinfo.location}
										<tr>
											<td>
												{icon name="home"}
											</td>
											<td>
												{trans("Location")}
											</td>
											<td class="cell-flex">
												<div>
												{if $nodeinfo.teryt}
													{if $nodeinfo.location_name}{$nodeinfo.location_name} ,{/if}
													{t a=$nodeinfo.location}$a (TERYT){/t}
												{else}
													{if $nodeinfo.location_name}{$nodeinfo.location_name} ,{/if}{$nodeinfo.location}
												{/if}
												{if empty($nodeinfo.address_id)}
													<span class="lms-ui-alert bold">{trans("<!node-location>(implicit)")}</span>
												{/if}
												</div>
											</td>
										</tr>
									{/if}

									{if $nodeinfo.netdev || $netdevices}
										{if !$nodeinfo.netdev && $netdevices}
											<form method="get" action="?m=nodeedit" name="nodelink">
												<input type="hidden" name="m" value="nodeedit">
												<input type="hidden" name="id" value="{$nodeinfo.id}">
												<input type="hidden" name="action" value="link">
												<input type="submit" class="hiddenbtn">
										{/if}

										{if !$disable_active_links || $nodeinfo.netdev}
											<tr>
												<td>
													{icon name="netdev"}
												</td>
												<td>
													{trans("Network device")}
												</td>
												<td>
													{if $nodeinfo.netdev}
														<a href="?m=netdevinfo&id={$netdevices.id}">
															<strong>
																{$netdevices.name} {$netdevices.producer}
																{if $netdevices.location}
																	/ {$netdevices.location}
																{/if}
															</strong>
														</a>

														{if $nodeinfo.port}
															[{$nodeinfo.port}]
														{/if}
														{capture name="linkinfo"}{if $nodeinfo.linktechnology}{$_LINKTECHNOLOGIES[$nodeinfo.linktype][$nodeinfo.linktechnology]} / {/if}{if $nodeinfo.linkradiosector}{$nodeinfo.linkradiosectorname} / {/if}{$_LINKSPEEDS[$nodeinfo.linkspeed]}{/capture}
														{if $nodeinfo.linktype == $smarty.const.LINKTYPE_WIRELESS}
															{icon name="wireless" tip=$smarty.capture.linkinfo}
														{elseif $nodeinfo.linktype == $smarty.const.LINKTYPE_FIBER}
															{icon name="fiber" tip=$smarty.capture.linkinfo}
														{else}
															{icon name="wired" tip=$smarty.capture.linkinfo}
														{/if}
													{else}
														{if $netdevices}
															{button type="link" icon="search" tip="Search device"
																onclick="return netDevChooseWin(document.nodelink.elements['devid']);"}
															<select size="1" style="width: 300px;" name="devid" id="netdev" {tip trigger="netdev"} onchange="change_netdevice(this.options[this.selectedIndex].value)">
																<option value="0" {if !$netdevice}SELECTED{/if}>— {trans("no device")} —</option>
																{section name=netdev loop=$netdevices}
																	{assign var=netdevname value=$netdevices[netdev].name}
																	{if $netdevices[netdev].producer}{assign var=netdevname value=$netdevname|cat:" / "|cat:$netdevices[netdev].producer}{/if}
																	{if $netdevices[netdev].location}{assign var=netdevname value=$netdevname|cat:" ("|cat:$netdevices[netdev].location|cat:")"}{/if}
																	<option value="{$netdevices[netdev].id}" {if $netdevices[netdev].id==$netdevice}SELECTED{/if}>{$netdevname|truncate:120:"&hellip;":true}</option>
																{/section}
															</select>

															{button type="link" icon="map"
																onClick="return netdevfrommapchoosewin(document.nodelink.elements['devid']);"
																tip="Click to select network device from map"}
															<input type="text" name="port"
																value="{if $nodeinfo.port}{$nodeinfo.port}{/if}"
																  size="2" {tip text="Enter port number in device (optional)" trigger="port"}>
															<br>

															<select name="linktype" id="linktype"
																{tip trigger="linktype" text="Select link type"}
																onchange="change_linktype(this.options[this.selectedIndex].value)">
																{foreach $_LINKTECHNOLOGIES as $key => $linktech}
																	<option value="{$linktype}"{if $linktype == $key} selected{/if}>{$_LINKTYPES[$key]}</option>
																{/foreach}
															</select>

															<select name="radiosector" id="radiosector"
																{tip trigger="radiosector" text="Select radio sector"}
																style="display: none;">
																<option value="0">{trans("— none —")}</option>
															</select>

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

															<select name="linkspeed" id="linkspeed" {tip trigger="linkspeed" text="Select link speed"}>
																{foreach $_LINKSPEEDS as $key => $item}
																	<option value="{$key}"
																		{if $linkspeed == $key} selected{/if}>{$item}</option>
																{/foreach}
															</select>

															{button type="link" icon="edit" label="Connect"
																onclick="document.nodelink.submit();"}
														{/if}
													{/if}
												</td>
											</tr>
										{/if}

										{if !$nodeinfo.netdev && $netdevices}
											</form>
										{/if}
									{/if}

									<tr>
										<td>
											{icon name="invproject"}
										</td>
										<td>
											 {trans("Investment project")}
										</td>
										<td>
											{$nodeinfo.projectname|escape}
										</td>
									</tr>

									{if !$disable_active_links || ($nodeinfo.chkmac + $nodeinfo.halfduplex) != 0}
										<tr>
											<td>
												{icon name="option"}
											</td>
											<td>
												{trans("Options")}
											</td>
											<td>
												{if $disable_active_links}
													<ol class="lms-inline-list">
														{if $nodeinfo.chkmac}<li>{trans("MAC checking")}</li>{/if}
														{if $nodeinfo.halfduplex}<li>{trans("Half duplex")}</li>{/if}
													</ol>
												{else}
													<label>
														<input type="checkbox" class="configcheckbox" data-field="chkmac" name="chkmac" value="1" {if $nodeinfo.chkmac} checked{/if}>
														{trans("MAC checking")}
													</label>

													<label>
														<input type="checkbox" class="configcheckbox" data-field="halfduplex" name="duplex" value="1" {if $nodeinfo.halfduplex} checked{/if}>
														{trans("Half duplex")}
													</label>
												{/if}
											</td>
										</tr>
									{/if}

									{if !$disable_active_links || $nodeinfo.authtype != 0}
										<tr>
											<td>
												{icon name="netdev"}
											</td>
											<td>
												{trans("Type")}
											</td>
											<td>
												{if $disable_active_links}
													<ol class="lms-inline-list">
														{foreach $_SESSIONTYPES as $idx => $sessiontype}
															{if $nodeinfo.authtype & $idx}
																<li>{$sessiontype.label}</li>
															{/if}
														{/foreach}
													</ol>
												{else}
													{$first=true}
													{foreach $_SESSIONTYPES as $idx => $sessiontype}
														{if $disable_active_links}
															{if !$first} / {/if}{$first=false}{$sessiontype.label}
														{else}
															<label>
																<input type="checkbox" name="authtype[{$idx}]" value="{$idx}"
																	class="authtype"
																	{tip text="`$sessiontype.tip`" trigger="authtype`$idx`"}
																	{if ($nodeinfo.authtype & $idx) == $idx} checked{/if}>
																{$sessiontype.label}
															</label><br>
														{/if}
													{/foreach}
												{/if}
											</td>
										</tr>
									{/if}
									{/block}
								</table>
							</div>
							<div class="lmsbox-panel">
								<table id="nodeinfo" class="tab-beautify">
									{block name="nodeinfobox-rightcolumn"}
									<colgroup>
										<col style="width: 1%;">
										<col style="width: 1%;">
										<col style="width: 98%;">
									</colgroup>

									{if $nodeinfo.info}
										<tr>
											<td>
												{icon name="description"}
											</td>
											<td>
												{trans("Description")}
											</td>
											<td class="cell-flex">
												<div>
													<table style="width: 100%;" cellpadding="5">
														<tr>
															<td>
																<div class="lms-ui-multiline-box">
																	{$nodeinfo.info|replace:"\n":"<br>"}
																</div>
															</td>
														</tr>
													</table>
												</div>
											</td>
										</tr>
									{/if}

									<tr>
										<td>
											{if $nodeinfo.access}
												{$icon = "connected"}
											{else}
												{$icon = "disconnected"}
											{/if}
											{if $disable_active_links}
												{icon name=$icon}
											{else}
												<a href="?m=nodeset&id={$nodeinfo.id}">
													{icon name=$icon}
												</a>
											{/if}
										</td>
										<td>
											{trans("Status")}
										</td>
										<td>
											{if $nodeinfo.access}
												{trans("connected<!singular>")}
											{else}
												{trans("disconnected<!singular>")}
											{/if}
										</td>
									</tr>

									{if $nodeinfo.longitude || $nodeinfo.latitude}
										<tr>
											<td>
												{icon name="location"}
											</td>
											<td>
												<strong>{trans("GPS longitude")}</strong>
											</td>
											<td class="cell-flex">
												{if $nodeinfo.longitude}{$nodeinfo.longitude}{else}{/if}
												<input type="hidden" id="longitude" name="longitude" value="{$nodeinfo.longitude}">
											</td>
										</tr>
										<tr>
											<td>
												{icon name="location"}
											</td>
											<td>
												<strong>{trans("GPS latitude")}</strong>
											</td>
											<td class="cell-flex">
												{if $nodeinfo.latitude}{$nodeinfo.latitude}{else}{/if}
												<input type="hidden" id="latitude" name="latitude" value="{$nodeinfo.latitude}">
											</td>
										</tr>
										<tr>
											<td colspan="2">
											</td>
											<td class="cell-flex">
												{show_on_map_button
													nodeid=$nodeinfo.id
													label=true}
												{show_on_map_button
													type="default"
													latitude=$nodeinfo.latitude
													longitude=$nodeinfo.longitude
													label=true
												}
												{show_on_map_button
													type="geoportal"
													latitude=$nodeinfo.latitude
													longitude=$nodeinfo.longitude
													label=true
												}
												{show_on_map_button
													type="netstork"
													latitude=$nodeinfo.latitude
													longitude=$nodeinfo.longitude
													label=true
												}
											</td>
										</tr>
									{/if}

									<tr>
										<td>
											{if $nodeinfo.warning}
												{$icon = "warnon"}
											{else}
												{$icon = "warnoff"}
											{/if}
											{if $disable_active_links}
												{icon name=$icon}
											{else}
												<a href="?m=nodewarn&id={$nodeinfo.id}">
													{icon name=$icon}
												</a>
											{/if}
										</td>
										<td>
											{trans("Notices")}
										</td>
										<td>
											{if $nodeinfo.warning}
												{icon name="checked"}
											{else}
												-
											{/if}
										</td>
									</tr>

									{if $nodeinfo.lastonline}
										<tr>
											<td>
												{icon name="time"}
											</td>
											<td>
												{trans("last online")}
											</td>
											<td class="cell-flex">
												<div>
													{$nodeinfo.lastonlinedate}
												</div>
											</td>
										</tr>
									{/if}

									{if !empty($nodesessions)}
										{$nodesession = reset($nodesessions)}
										{if $nodesession.nasipaddr || $nodesession.nasid}
											<tr>
												<td>
													{icon name="nodesession"}
												</td>
												<td>
													{trans("last NAS/BRAS")}
												</td>
												<td class="cell-flex">
													<div>
														{if $nodesession.stop > $smarty.now - intval(ConfigHelper::getConfig('phpui.lastonline_limit'))}
															{$online = true}
														{else}
															{$online = false}
														{/if}
														{if $nodesession.nasid}
															{t a=$nodesession.nasip b=$nodesession.nasid}{strip}
																<!last-nas>$a ($b)
															{/strip}{/t}
														{else}
															{t a=$nodesession.nasip}{strip}
																<!last-nas>$a
															{/strip}{/t}
														{/if}
														{if $online}
															{button type="link" icon="reload" class="radius-disconnect-button"
																data_nodesession_id=$nodesession.id tip="Disconnect existing session"}
														{/if}
														{if !empty($session_state_helper)}
															{hint icon="info" id="session-state" url="?m=nodeinfo&id={$nodeinfo.id}&action=session_state"}
														{/if}
													</div>
												</td>
											</tr>
										{/if}
										{if $nodesession.mac}
											<tr>
												<td>
													{icon name="mac"}
												</td>
												<td>
													{trans("last MAC address")}
												</td>
												<td class="cell-flex">
													<div>
														{$nodesession.mac}
														{$producer = EtherCodes::GetProducer($nodesession.mac)}
														{if $producer}
															<span class="lms-ui-font-smaller">
																({$producer})
															</span>
														{/if}
													</div>
												</td>
											</tr>
										{/if}
									{/if}

									<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 style="width: 100%;" colspan="3" class="lms-ui-box-buttons">
				{block name="nodeinfobox-buttons"}
					{button type="link-button" id="clone-button" icon="clone" label="Clone"
						href="?m=nodeadd&ownerid={$nodeinfo.ownerid}&premac[]={implode('&premac[]=', $macs)}&prename={t a=$nodeinfo.name}$a_clone{/t}{if $nodeinfo.address_id}&pre_address_id={$nodeinfo.address_id}{/if}"}
					{button type="link-button" id="edit-button" icon="edit" label="Edit" href="?m=nodeedit&id={$nodeinfo.id}"}
					{button id="delete-node" icon="delete" label="Delete" onclick="javascript:delete_node('{$nodeinfo.id}', '{$nodeinfo.name}');"}
				{/block}
			</td>
		</tr>
	</tbody>
</table>

<script>

    $(function() {
        {if !$disable_active_links}
        var link = '?m=nodeedit&id={$nodeinfo.id}';
        var nodeid = {$nodeinfo.id};

        $( '.authtype' ).click( function() {
           var sum = 0;

            $.each( $( '.authtype' ), function() {
                if ( this.checked )
                    sum += parseInt( $(this).val() );
                });

            $.ajax({
                url: link + '&action=updatenodefield',
                method: "POST",
                data: {
                    nodeid: nodeid,
                    field : 'authtype',
                    val   : sum
                }
            });
        });

        $( '.configcheckbox' ).click( function() {
            $.ajax({
                url: link + '&action=updatenodefield',
                method: "POST",
                data: {
                    nodeid: nodeid,
                    field : $(this).attr('data-field'),
                    val   : (( this.checked ) ? 1 : 0)
                }
            });
        });
		{/if}

		$('.mac-address').click(function() {
			changeMacFormat($(this).attr('id'));
		});

		$('.mac-address-copy-to-clipboard').on('lms:clipboard:click', function() {
			return $(this).closest('tr').find('.mac-address').text().trim();
		});

		var disconnectButton = $('.radius-disconnect-button');
		disconnectButton.click(function() {
			disconnectButton.prop('disabled', true).attr('disabled', '');
			$.ajax({
				url: "?m=nodesession&action=disconnect&id=" + disconnectButton.attr('data-nodesession-id'),
				dataType: "json",
				success: function(data, textStatus, qXHR) {
					disconnectButton.prop('disabled', false).removeAttr('disabled');
					if (data.hasOwnProperty("error")) {
						alertDialog(data.error, disconnectButton);
					}
				},
				error: function(jqXHR, textStatus, errorThrown) {
					disconnectButton.prop('disabled', false).removeAttr('disabled');
					alertDialog($t("AJAX: Invalid result - status: $a", textStatus), disconnectButton);
				}
			});
		});
	});

	$.ajax({
		url: "?m={$layout.module}&id={$nodeinfo.id}&action=get_node_stats",
		dataType: "html",
		success: function(data) {
			$("#nodeinfo").append(data);
		}
	});

	function change_netdevice(id) {
		if ($('#linktype').val() == '1') {
			$('#linktype,#radiosector,#linktechnology,#linkspeed').prop('disabled', true);
			xajax_getRadioSectors(id, $('#linktechnology').val());
		}
	}

	function change_linktype(linktype) {
		linktype = parseInt(linktype);
		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);
		}
	}

	function change_linktechnology(technology) {
		technology = parseInt(technology);
		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);
		}
	}

	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});

	function delete_node(nodeid, nodename) {
		confirmDialog($t("Are you sure, you want to remove node '$a' from database?", nodename), $('#delete-node')).done(function() {
			location.href = '?m=nodedel&id='+nodeid;
		});
		return false;
	}

</script>
