{strip}
{if !isset($classLabel)}
	{assign var=classLabel value="default_params_label"}
{/if}
{if !isset($classInput)}
	{assign var=classInput value="default_params_input"}
{/if}
{assign var=type value=""}
{if isset($plugin_name)}
	{if preg_match("/_TEMP/i", $plugin_name)}
		{$type = "temp"}
		{assign var=alertUnit value="C°"}
		{assign var=alertLimits value='min="-55" max="300" step="0.1"'}
	{elseif preg_match("/_HUMI/i", $plugin_name)}
		{$type = "humi"}
		{assign var=alertUnit value="%"}
		{assign var=alertLimits value='min="0" max="100" step="1"'}
	{elseif preg_match("/_CONT/i", $plugin_name)}
		{$type = "cont"}
	{/if}
{/if}
<script>
	// Self called function used to prevent vars redeclaration if the template is called multiple times into the same page
	{literal}
	(() => {
	{/literal}
		let htmlId = '{$htmlid}';
		let paramId = '{$html_params_id}';
	{literal}

		const matchAll = '[^\\s-]*'; // Anything between the parameter tag (-S, -a, ...) and the next space or -
		$(window).on('load', function() {
			let paramInput = $('#' + paramId);
			let param = paramInput.val();
			let result = null;

			// Port COM -E
			result = param.match(/\-E\s+([0-9]*)/);
			if(result !== null)
			{
				$('#plug-' + htmlId + '-param-expansion').val(result[1]);
			}
			$('#plug-' + htmlId + '-param-expansion').on('change', function() {
				eui_plugins.addOrReplaceParameter(paramInput, '-E', matchAll, this.value);
			});

			// Module -M
			result = param.match(/\-M\s+([0-9]*\.?[0-9]*)/);
			if(result !== null)
			{
				$('#plug-' + htmlId + '-param-module').val(result[1]);
			}
			$('#plug-' + htmlId + '-param-module').on('change', function() {
				eui_plugins.addOrReplaceParameter(paramInput, '-M', matchAll, this.value);
			});

			// Port & subport -S
			result = param.match(/\-S\s+([0-9]*),?([0-9]*)/);
			if(result !== null)
			{
				$('#plug-' + htmlId + '-param-port').val(result[1]);
				$('#plug-' + htmlId + '-param-subport').val(result[2]);
			}
			$('#plug-' + htmlId + '-param-port').on('change', function() {
				eui_plugins.addOrReplaceParameter(paramInput, '-S', '([0-9]*),?([0-9]*)', this.value + ',$2');
			});
			$('#plug-' + htmlId + '-param-subport').on('change', function() {
				eui_plugins.addOrReplaceParameter(paramInput, '-S', '([0-9]*),?([0-9]*)', '$1,' + this.value);
			});
	{/literal}
		{if $type === "temp" || $type === "humi"}
	{literal}
			const matchNumTemp = '-?[0-9]*\\.?[0-9]*'; // Match a number wich can be negative and floating
			const captureNumTemp = '(' + matchNumTemp + '),?(' + matchNumTemp + ')';

			// Warning -w
			result = param.match(new RegExp('\\-w\\s+' + captureNumTemp));
			if(result !== null)
			{
				$('#plug-' + htmlId + '-param-minwarn').val(result[1]);
				$('#plug-' + htmlId + '-param-maxwarn').val(result[2]);
			}
			$('#plug-' + htmlId + '-param-minwarn').on('change', function() {
				eui_plugins.addOrReplaceParameter(paramInput, '-w', captureNumTemp, this.value + ',$2');
			});
			$('#plug-' + htmlId + '-param-maxwarn').on('change', function() {
				eui_plugins.addOrReplaceParameter(paramInput, '-w', captureNumTemp, '$1,' + this.value);
			});

			// Critical -c
			result = param.match(new RegExp('\\-c\\s+' + captureNumTemp));
			if(result !== null)
			{
				$('#plug-' + htmlId + '-param-mincrit').val(result[1]);
				$('#plug-' + htmlId + '-param-maxcrit').val(result[2]);
			}
			$('#plug-' + htmlId + '-param-mincrit').on('change', function() {
				eui_plugins.addOrReplaceParameter(paramInput, '-c', captureNumTemp, this.value + ',$2');
			});
			$('#plug-' + htmlId + '-param-maxcrit').on('change', function() {
				eui_plugins.addOrReplaceParameter(paramInput, '-c', captureNumTemp, '$1,' + this.value);
			});
	{/literal}
		{elseif $type === "cont"}
	{literal}
			// Input type -I
			result = param.match(/\-I\s+([0-1]{1})/);
			if(result !== null)
			{
				$('#plug-' + htmlId + '-param-input').val(result[1]);
			}
			new SlimSelect({
				select: '#plug-' + htmlId + '-param-input',
				settings: { showSearch: false },
				events: {
					afterChange: elt => {
						eui_plugins.addOrReplaceParameter(paramInput, '-I', matchAll, elt[0].value);
					},
				},
			});

			// Alert type -a
			result = param.match(/\-a\s+([wco]{1})/);
			if(result !== null)
			{
				$('#plug-' + htmlId + '-param-alerttype').val(result[1]);
			}
			new SlimSelect({
				select: '#plug-' + htmlId + '-param-alerttype',
				settings: { showSearch: false },
				events: {
					afterChange: elt => {
						eui_plugins.addOrReplaceParameter(paramInput, '-a', matchAll, elt[0].value);
					},
				},
			});
	{/literal}
		{/if}
	{literal}
		});
	})();
	{/literal}
</script>
{* Start grid-container-2cols *}
<div class="grid-container-2cols">
	<div class="grid-item">
		<label for="plug-{$htmlid}-param-expansion" class="{$classLabel}">{$lang.COM_PORT}</label>
		<input type="number" id="plug-{$htmlid}-param-expansion" class="{$classInput}" min="0" step="1"/>
	</div>
	<div class="grid-item">
		<label for="plug-{$htmlid}-param-module" class="{$classLabel}">{$lang.MODULE}</label>
		<input type="number" id="plug-{$htmlid}-param-module" class="{$classInput}" min="0" step=".1"/>
	</div>
	<div class="grid-item">
		<label for="plug-{$htmlid}-param-port" class="{$classLabel}">{$lang.LGD_PORT}</label>
		<input type="number" id="plug-{$htmlid}-param-port" class="{$classInput}" min="1" step="1"/>
	</div>
	<div class="grid-item">
		<label for="plug-{$htmlid}-param-subport" class="{$classLabel}">{$lang.SUB_PORT}</label>
		<input type="number" id="plug-{$htmlid}-param-subport" class="{$classInput}" min="1" step="1"/>
	</div>
{if $type === "temp" || $type === "humi"}
	<div class="grid-item">
		<label for="plug-{$htmlid}-param-minwarn" class="{$classLabel}">{$lang.WARNING_LOW}</label>
		<input type="number" id="plug-{$htmlid}-param-minwarn" class="{$classInput}" {$alertLimits}/>
		<span>{$alertUnit}</span>
	</div>
	<div class="grid-item">
		<label for="plug-{$htmlid}-param-maxwarn" class="{$classLabel}">{$lang.WARNING_HIGH}</label>
		<input type="number" id="plug-{$htmlid}-param-maxwarn" class="{$classInput}" {$alertLimits}/>
		<span>{$alertUnit}</span>
	</div>
	<div class="grid-item">
		<label for="plug-{$htmlid}-param-mincrit" class="{$classLabel}">{$lang.CRITICAL_LOW}</label>
		<input type="number" id="plug-{$htmlid}-param-mincrit" class="{$classInput}" {$alertLimits}/>
		<span>{$alertUnit}</span>
	</div>
	<div class="grid-item">
		<label for="plug-{$htmlid}-param-maxcrit" class="{$classLabel}">{$lang.CRITICAL_HIGH}</label>
		<input type="number" id="plug-{$htmlid}-param-maxcrit" class="{$classInput}" {$alertLimits}/>
		<span>{$alertUnit}</span>
	</div>
</div> {* End grid-container-2cols *}
{elseif $type === "cont"}
</div> {* End grid-container-2cols *}
	<div class="default_params_container">
		<label for="plug-{$htmlid}-param-input" class="{$classLabel}">{$lang.CONTACT_NORMAL_STATE}</label>
		<select id="plug-{$htmlid}-param-input" class="{$classInput}">
			<option value="0">{$lang.OPEN}</option>
			<option value="1">{$lang.CLOSED}</option>
		</select>
	</div>
	<div class="default_params_container">
		<label for="plug-{$htmlid}-param-alerttype" class="{$classLabel}">{$lang.ALERT_TYPE}</label>
		<select id="plug-{$htmlid}-param-alerttype" class="{$classInput}">
			<option value="w">{$lang.LGD_WARN}</option>
			<option value="c">{$lang.LGD_CRI}</option>
			<option value="o">{$lang.LGD_OK}</option>
		</select>
	</div>
{else}
</div> {* End grid-container-2cols for type akcp auto (no temp, humid or contact) *}
{/if}
{/strip}