<!-- $Id$ -->

<style>

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

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

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

	.tab-beautify td {
		padding: 3px;
	}

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

</style>

<form name="editipaddr" method="POST" action="?m=netdevedit&action=formeditip&id={$netdev.id}&ip={$nodeipdata.id}">
	<input type="submit" class="hiddenbtn">
	<input type="hidden" name="ipadd[id]" value="{$nodeipdata.id}">
	<input type="hidden" name="ipadd[createdby]" value="{$nodeipdata.createdby|escape}">
	<input type="hidden" name="ipadd[creationdateh]" value="{$nodeipdata.creationdateh}">
	<input type="hidden" name="ipadd[moddate]" value="{$nodeipdata.moddate}">
	<input type="hidden" name="ipadd[modifiedby]" value="{$nodeipdata.modifiedby|escape}">
	<input type="hidden" name="ipadd[moddateh]" value="{$nodeipdata.moddateh}">

<table class="lmsbox">
	<colgroup>
		<col style="width: 1%;">
		<col style="width: 1%;">
		<col style="width: 98%;">
	</colgroup>
	<thead>
		<tr>
			<td>
				{icon name="node"}
			</td>
			<td>
				<strong>{trans("Name")}</strong>
			</td>
			<td>
				<input type="text" name="ipadd[name]" value="{$nodeipdata.name}" maxlength="32" size="30"
					required {tip trigger="ipname" bold=1}>
				<strong>(#{$nodeipdata.id})</strong>
			</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="3" class="container">
				<table style="width: 100%;" class="lmsbox-inner">
					<colgroup>
						<col style="width: 50%;">
						<col style="width: 50%;">
					</colgroup>
					<tr>
						<td class="valign-top">
							<table style="width: 100%;" class="tab-beautify">
								<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>
										<select name="ipadd[netid]" id="netid"
											{tip trigger="netid" class="lms-ui-advanced-select-test"}>
											<option value="0">{trans("— automatic selection —")}</option>
											{foreach $networks as $net}
												<option value="{$net.id}" data-pubnetid="{$net.pubnetid}"
													{if $net.id == $nodeipdata.netid} selected{/if}
													{if $net.disabled == 1} class="lms-ui-alert"{/if}
												>{$net.name|truncate:20:"":true}: {$net.address}/{$net.prefix}</option>
											{/foreach}
										</select>
									</td>
								</tr>
								<tr>
									<td>
										{icon name="routed"}
									</td>
									<td>
										{trans("IP address")}
									</td>
									<td class="cell-flex">
										<div>
											<input type="text" name="ipadd[ipaddr]" id="ipaddr" value="{$nodeipdata.ipaddr}" required
												{tip trigger="ipaddr"}>
											{button type="link" onClick="return ipchoosewin({
													ipelem: document.editipaddr['ipadd[ipaddr]'],
													ip: document.editipaddr['ipadd[ipaddr]'].value,
													netelem: document.editipaddr['ipadd[netid]'],
													netid: document.editipaddr['ipadd[netid]'].value,
													device: {$netdev.id}
												});" 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'))}
									<tr>
										<td>
											{icon name="routed"}
										</td>
										<td>
											{trans("Pub. IP address")}
										</td>
										<td class="cell-flex">
											<div>
												<input type="hidden" name="ipadd[pubnetid]" value="{$nodeipdata.pubnetid}">
												<input type="text" name="ipadd[ipaddr_pub]"
													value="{if $nodeipdata.ipaddr_pub!="0.0.0.0"}{$nodeipdata.ipaddr_pub}{/if}"
													{tip trigger="ipaddr_pub"}>
												{button type="link" onClick="return ipchoosewin({
														ipelem: document.editipaddr['ipadd[ipaddr_pub]'],
														ip: document.editipaddr['ipadd[ipaddr_pub]'].value,
														netelem: document.editipaddr['ipadd[pubnetid]'],
														netid: document.editipaddr['ipadd[pubnetid]'].value,
														privnetid: document.editipaddr['ipadd[netid]'].value,
														device: {$netdev.id}
													});" tip="Click to select IP from the list"
													icon="next"}
											</div>
										</td>
									</tr>
								{/if}

								<tr>
									<td>
										{icon name="mac"}
									</td>
									<td>
										{trans("MAC")}
									</td>
									<td class="lms-ui-mac-address-selection">
										{mac_address_selection form="ipadd" macs=$nodeipdata.macs node_empty_mac=$netdev_empty_mac}
									</td>
								</tr>
								<tr>
									<td>
										{icon name="password"}
									</td>
									<td>
										{trans("Password")}
									</td>
									<td>
										<input type="text" name="ipadd[passwd]" id="passwordcontainer"
											value="{$nodeipdata.passwd|escape}"
											{tip trigger="passwd"}>
										{button type="link" id="genpasswd" icon="next"
											tip="Click to generate random password"}
									</td>
								</tr>
								<tr>
									<td>
										{icon name="options"}
									</td>
									<td>
										{trans("Options")}
									</td>
									<td>
										<label>
											<input type="checkbox" name="ipadd[chkmac]" value="1"
												{tip text="Enable/disable MAC address checking" trigger="chkmac"}
												{if $nodeipdata.chkmac} checked{/if}>&nbsp;
											{trans("MAC checking")}
										</label>

										<label>
											<input type="checkbox" name="ipadd[halfduplex]" value="1"
												{tip text="Select transmission mode" trigger="halfduplex"}
												{if $nodeipdata.halfduplex} checked{/if}>
											{trans("Half duplex")}
										</label>

										{if ConfigHelper::checkConfig('phpui.radius')}
											<label>
												<input type="checkbox" name="ipadd[nas]" value="1"
													{tip text="Select NAS on or off" trigger="nas"}
													{if $nodeipdata.nas} checked{/if}>
												{trans("NAS")}
											</label>
										{/if}
									</td>
								</tr>
								<tr>
									<td>
										{icon name="netdev"}
									</td>
									<td>
										{trans("Type")}
									</td>
									<td class="nobr">
										{foreach $_SESSIONTYPES as $idx => $sessiontype}
											<label>
												<input type="checkbox" name="ipadd[authtype][{$idx}]" value="{$idx}"
													id="authtype{$idx}" {tip text="`$sessiontype.tip`" trigger="authtype`$idx`"}
													{if ($nodeipdata.authtype & $idx) == $idx} checked{/if}>
												{$sessiontype.label}
											</label><br>
										{/foreach}
									</td>
								</tr>
							</table>
						</td>
						<td class="valign-top">
							<table style="width: 100%;" class="tab-beautify">
								<colgroup>
									<col style="width: 1%">
									<col style="width: 1%">
									<col style="width: 98%">
								</colgroup>

								<tr>
									<td>
										{icon name="info"}
									</td>
									<td>
										{trans("Description")}
									</td>
									<td>
										<textarea name="ipadd[info]" rows="5" cols="40"
											{tip text="Enter additional information (optional)"}>{$nodeipdata.info|escape}</textarea>
									</td>
								</tr>

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

								<tr>
									<td>
										{icon name="user"}
									</td>
									<td>
										{trans("Created")}
										<br>
										{trans("Modified")}
									</td>
									<td class="cell-flex">
										<div>
											{$nodeipdata.createdby|escape}, {$nodeipdata.creationdateh}
											<br>
											{if $nodeipdata.moddate}{$nodeipdata.modifiedby|escape}, {$nodeipdata.moddateh}{else}-{/if}
										</div>
									</td>
								</tr>
	                        </table>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr>
			<td colspan="3" class="lms-ui-box-buttons">
				{button type="submit" icon="save" label="Submit"}
				{button icon="cancel" label="Cancel"
					href="?m=netdevinfo&id={$netdev.id}{if isset($nodeipdata.id)}&ip={$nodeipdata.id}{/if}"}
			</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() {
		{if (ConfigHelper::checkConfig('phpui.show_assigned_networks_only')) && ConfigHelper::checkConfig('nodes.public_ip', ConfigHelper::checkConfig('phpui.public_ip'))}
			$('#netid').change(function() {
				var pubnetid = parseInt($('option:selected', this).attr('data-pubnetid'));
				if (pubnetid) {
				$('[name="ipadd[pubnetid]"]').val(0);
			});
		{/if}

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

		$('#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;
		});
	});

</script>
