{include file="orderforms/{$carttpl}/common.tpl"}

	{if count($products) < 4}
	<style rel="stylesheet" type="text/css">
		@media (min-width: 1400px) {
			#order-clouder {
				{if count($products) == 1}
					margin: 0 auto; max-width: 25%; width: 25%;
				{elseif count($products) == 2}
					margin: 0 auto; max-width: 50%; width: 50%;
				{elseif count($products) == 3}
					margin: 0 auto; max-width: 75%; width: 75%;
				{else}
				{/if}
			}
		}
		
		@media (min-width: 992px) and (max-width: 1399px) {
			#order-clouder {
				{if count($products) == 1}
					margin: 0 auto; max-width: 33%; width: 33%;
				{elseif count($products) == 2}
					margin: 0 auto; max-width: 75%; width: 75%;
				{else}
				{/if}
			}
		}	
	</style>
	{/if}


{if file_exists("templates/orderforms/{$carttpl}/layouts/head.tpl")}
	{include file="templates/orderforms/{$carttpl}/layouts/head.tpl"}
{/if}
	
<div id="order-standard_cart">

    <div class="row">
	
        <div class="col-md-12">
			{if file_exists("templates/orderforms/{$carttpl}/layouts/head.tpl")}
			{else}
        		<div class="header-lined">
				<h1>
					{$productGroup.name}
				</h1>
				{if $productGroup.headline}
					<h4 class="text-muted">{$productGroup.headline}</h4>
				{/if}
				{if $productGroup.tagline}
					<p class="text-muted">{$productGroup.tagline}</p>
				{/if}
			</div>
			{/if}
			
			<div class="TM-categories-options justify-content-center">
				<form>
					<select name="gid" id="gidForm" onchange="javascript:redirectToCartPage()" class="form-control">
						<optgroup label="Product Categories">
							{foreach key=num item=productgroup from=$productgroups}
								<option value="{$productgroup.routePath}"{if $gid eq $productgroup.gid} selected="selected"{/if}>{$productgroup.name}</option>
							{/foreach}
						</optgroup>
						<optgroup label="Actions">
							{if $loggedin}
								<option value="{$WEB_ROOT}/cart.php?gid=addons"{if $gid eq "addons"} selected{/if}>{$LANG.cartproductaddons}</option>
								{if $renewalsenabled}
									<option value="{$WEB_ROOT}/cart.php?gid=renewals"{if $gid eq "renewals"} selected{/if}>{$LANG.domainrenewals}</option>
								{/if}
							{/if}
							{if $registerdomainenabled}
								<option value="{$WEB_ROOT}/cart.php?gid=registerdomain"{if $domain eq "register"} selected{/if}>{$LANG.navregisterdomain}</option>
							{/if}
							{if $transferdomainenabled}
								<option value="{$WEB_ROOT}/cart.php?gid=transferdomain"{if $domain eq "transfer"} selected{/if}>{$LANG.transferinadomain}</option>
							{/if}
							<option value="{$WEB_ROOT}/cart.php?a=view"{if $action eq "view"} selected{/if}>{$LANG.viewcart}</option>
						</optgroup>
					</select>
				</form>
			</div>
			
            {if $errormessage}
                <div class="alert alert-danger">
                    {$errormessage}
                </div>
            {elseif !$productGroup}
                <div class="alert alert-info">
                    {lang key='orderForm.selectCategory'}
                </div>
            {/if}
        </div>

        <div class="col-md-12">

			<div id="order-clouder">
				<div id="products" class="cros-pricing-container">
					<div class="owl-carousel pricing-box no-padding-top">
					{foreach $products as $key => $product}
						<div class="slide-item" id="product{$product@iteration}">
							<div class="cros-pricing-table light fixed-height {if $product.isFeatured}active{/if}">
										
								<h4 id="product{$product@iteration}-name">{$product.name}</h4>
								{if $product.featuresdesc}<div class="desc">{$product.featuresdesc}</div>{else}{/if}
												

								<div id="product{$product@iteration}-price">
									{if $product.bid}
										<div class="small text-muted">{$LANG.bundledeal}</div>
										{if $product.displayprice}
											<span class="text-secondary bolder" style="font-size: 33px;">{$product.displayPriceSimple}</span>
										{/if}
									{/if}
									<div class="price">
										{if $product.bid}
										{elseif $product.paytype eq "free"}
											<mark>{$LANG.orderfree}</mark>
										{elseif $product.paytype eq "onetime"}
											<span>{$product.pricing.onetime} </span>{$LANG.orderpaymenttermonetime}
										{else}
										
											{if $product.pricing.hasconfigoptions}
												{$LANG.from}
											{/if}
											
											{assign var="ccurrency" value=$product.pricing.minprice.price->getCurrency()}
											<span class="prefix">{$ccurrency["prefix"]}</span>
											<span class="cost">{$product.pricing.minprice.price->toNumeric()}</span>
											<span class="suffix">{$ccurrency["suffix"]}</span>
											<span class="cycle">{if $product.pricing.minprice.cycle eq "monthly"}
												/{$LANG.pricingCycleShort.monthly}
											{elseif $product.pricing.minprice.cycle eq "quarterly"}
												/{$LANG.pricingCycleShort.quarterly}
											{elseif $product.pricing.minprice.cycle eq "semiannually"}
												/{$LANG.pricingCycleShort.semiannually}
											{elseif $product.pricing.minprice.cycle eq "annually"}
												/{$LANG.pricingCycleShort.annually}
											{elseif $product.pricing.minprice.cycle eq "biennially"}
												/{$LANG.pricingCycleShort.biennially}
											{elseif $product.pricing.minprice.cycle eq "triennially"}
												/{$LANG.pricingCycleShort.triennially}
											{/if}</span>
													
										{/if}
									</div>
									
									{if $product.pricing.minprice.setupFee}
										<div class="small text-muted">({$product.pricing.minprice.setupFee->toPrefixed()} {$LANG.ordersetupfee})</div>
									{/if}
											
													
								</div>
										
								<p class="PriceList-toggle collapsed" data-toggle="collapse" data-target="#PlanLists1">
									<span>Details</span>
								</p>
								<table class="plan-features collapse" id="PlanLists1"
									{foreach from=$product.features key=feature item=value}
									  <tr>
                                                                              <td style="padding-right: 13px;"><b>{$feature}:</b></td>
                                                                              <td>
	                                                                          {if $value == "Ja"} <i class="far fa-check-square" style="font-size:14px"></i>
        	                                                                  {elseif $value == "Nein"} <i class="far fa-square" style="font-size:14px"></i>
            	                                                                  {else}
                	                                                              {$value}
                    		                                                  {/if}
                            	                                              </td>
									    </tr>
									{/foreach}
								</table>
								<!-- 
								<ul class="plan-features collapse" id="PlanLists1">
									{foreach from=$product.features key=feature item=value}
										<li>TD {$feature} <b>{$value}</b></li>
									{/foreach}
								</ul>
								-->	
									
										
								{if $product.isFeatured}
								<!-- Popular plan sticker -->
									<div class="sticker-wrapper">
										<div class="sticker">
											{$LANG.featuredProduct}
										</div>
									</div>
								<!-- //End popular plan sticker-->
								{/if}
								<a href="{$WEB_ROOT}/cart.php?a=add&{if $product.bid}bid={$product.bid}{else}pid={$product.pid}{/if}" class="btn btn-primary btn-block" style="margin-top: 10px;" id="product{$product@iteration}-order-button">
                                				    {$LANG.ordernowbutton}
                            					</a>

									
							</div>
						</div>
								
								
					{/foreach}
					</div>
				</div>
						
			</div>
			
			{if count($productGroup.features) > 0}
				
				<div class="space-30"></div>
				
				<div class="block-s3">
					<div class="text-center">
						<h2 class="no-margin">{$LANG.orderForm.includedWithPlans}</h2>
					</div>
				</div>
					
				<hr class="separator"></hr>
				
				<div class="cart-features no-margin-top">							
					<div class="includes-features">
						<ul class="list-features">
							{foreach $productGroup.features as $features}
								<li>{$features.feature}</li>
							{/foreach}
						</ul>
					</div>
				</div>
			{/if}
			
		</div>
	</div>
	
	
</div>
			
{if file_exists("templates/orderforms/{$carttpl}/layouts/foot.tpl")}
	{include file="templates/orderforms/{$carttpl}/layouts/foot.tpl"}
{/if}







<script type="text/javascript">
	$(document).ready(function() {		
		$(".pricing-box").owlCarousel({
		
			{if count($products) == 1}
			
				responsive:{
					0:{
						items:1,
					}
				}
			
			{elseif count($products) == 2}
				
				responsive:{
					0:{
						items:1,
					},
					768:{
						items:2,
					}
				}
			{elseif count($products) == 3}
			
				responsive:{
					0:{
						items:1,
					},
					768:{
						items:2,
					},
					992:{
						items:3,
					}
				}
			{else}
				responsive:{
					0:{
						items:1,
					},
					768:{
						items:2,
					},
					992:{
						items:3,
					},
					1200:{
						items:4,
					}
				}			
			{/if}
		});
	});

    function redirectToCartPage()
    {
        var path = jQuery('#gidForm').val();
        if (path) {
            window.location.href = path;
        }
    }	
</script>