<p>Erweitern Sie Ihr Produkt</p>
{if $errormessage}
	{include file="$template/includes/alert.tpl" type="error" errorshtml=$errormessage}
{/if}
<form method="post" action="{$smarty.server.PHP_SELF}">
	<input type="hidden" name="step" value="2" />
	<input type="hidden" name="type" value="{$type}" />
	<input type="hidden" name="id" value="{$id}" />
	<table class="table table-striped">
		{foreach $configoptions as $configoption}
			<tr>
				<td>
					<div class="form-group">
						<div class="col-sm-12">
							<div class="form-group">
								<label for="inputConfigOption{$configoption.id}">{$configoption.optionname}</label>
								{if $configoption.qtymaximum}
									{if !$rangesliderincluded}
										<script type="text/javascript" src="{$BASE_PATH_JS}/ion.rangeSlider.min.js"></script>
										<link href="{$BASE_PATH_CSS}/ion.rangeSlider.css" rel="stylesheet">
										<link href="{$BASE_PATH_CSS}/ion.rangeSlider.skinModern.css" rel="stylesheet">
										{assign var='rangesliderincluded' value=true}
									{/if}
									<input type="text" name="configoption[{$configoption.id}]" value="{if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}" id="inputConfigOption{$configoption.id}" class="form-control" />
									<script>
										var sliderTimeoutId = null;
										var sliderRangeDifference = {$configoption.qtymaximum} - {$configoption.qtyminimum};
										// The largest size that looks nice on most screens.
										var sliderStepThreshold = 25;
										// Check if there are too many to display individually.
										var setLargerMarkers = sliderRangeDifference > sliderStepThreshold;
										jQuery("#inputConfigOption{$configoption.id}").ionRangeSlider({
											min: {$configoption.qtyminimum},
											max: {$configoption.qtymaximum},
											grid: true,
											grid_snap: setLargerMarkers ? false : true,
											onChange: function() {
												if (sliderTimeoutId) {
													clearTimeout(sliderTimeoutId);
												}
												sliderTimeoutId = setTimeout(function() {
													sliderTimeoutId = null;
													recalctotals();
												}, 250);
											}
										});
									</script>
								{else}
									<div>
										<input type="number" name="configoption[{$configoption.id}]" value="{if $configoption.selectedqty}{$configoption.selectedqty}{else}{$configoption.qtyminimum}{/if}" id="inputConfigOption{$configoption.id}" min="{$configoption.qtyminimum}" onchange="recalctotals()" onkeyup="recalctotals()" class="form-control form-control-qty" />
										<span class="form-control-static form-control-static-inline">
											x {$configoption.options.0.name}
										</span>
									</div>
								{/if}
							</div>
						</div>
					</div>
				</td>
			</tr>
			<tr>
				<td class="clearfix">
					{$orderpaymentterm="orderpaymentterm`$curbillingcycle`"}
					{$LANG.additionalamount}: {$configoption.options.0.recurring} {$ccurrency.code} / {$configoption.options.0.nameonly} ({$LANG.$orderpaymentterm})
				</td>
			</tr>
		{/foreach}
	</table>
	<div class="form-actions">
		<input type="submit" value="{$LANG.ordercontinuebutton}" class="btn btn-primary" />
	</div>
</form>
