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

<!-- Start of Template: orderforms/thurdata/products.tpl -->
{*
{debug}
*}

	{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" style="padding-bottom:20px">
				<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>
				<br />
				<br />
			</div>
			
            {if $errormessage}
                <div class="alert alert-danger">
                    {$errormessage}
                </div>
            {elseif !$productGroup}
                <div class="alert alert-info">
                    {lang key='orderForm.selectCategory'}
                </div>
            {/if}
        </div>
	<style>
	    .flickity-slider { 
		height: 100%;
		min-height: 100%; 
	    }
	    .flickity-slider > div {
		min-height: 100%;
	    }
	    .flickity-page-dots {
	        top: -30px;
	        bottom: 0%; 
	    }
	    .carousel-cell { 
		height: 100% 
	    }
	    .prefix {
		font-size:150%;
		font-family: Roboto;
	    }
	    .cost {
		font-size:250%;
		font-family: Roboto;
		font-weight:800;
	    }
	    .suffix {
		font-size:250%;
		font-weight:600;
	    }
	    .cycle {
		font-size:150%;
		font-family: Roboto;
	    }
	</style>
        <div class="col-md-12">
			<div id="order-clouder" style="max-width:unset;width:unset;">
				<!-- <div id="products" class="cros-pricing-container"> -->
					{if $products|@count < 3} 
					    <div class="carousel" style="position:absolute;top:0px;left:0px;bottom:0px;right:0px;" data-flickity='{ "groupCells": true, "adaptiveHeight": true, "autoPlay": false, "prevNextButtons": false, "pageDots": false }'>
					{else}
					    <div class="carousel" style="position:absolute;top:0px;left:0px;bottom:0px;right:0px;" data-flickity='{ "groupCells": true, "adaptiveHeight": true, "autoPlay": false, "prevNextButtons": false }'>
					{/if}
					{foreach $products as $key => $product}
						<div class="carousell-cell" style="width:325px;height:100%;margin-right:25px;padding-left:20px;padding-right:20px;padding-bottom:20px;border:1px solid silver;border-radius:8px;" id="product{$product@iteration}"> 
						<!-- <div class="carousell-cell" style="width:325px;height:100% !important; margin-right:25px;border:1px solid silver;border-radius:8px;" id="product{$product@iteration}"> -->
							<table border="0" style="display: inline-table; table-layout:fixed; width:100%; visibility:visible;" cellpadding="0" cellspacing="5">
							    <tr style="height:140px;">
								<td valign="top" style="max-height:140px !important;"> <!-- Title and description -->
								    <div style="overflow:hidden;max-height:140px !important;">
									<h4 id="product{$product@iteration}-name" style="font-weight:700; font-family:Roboto; color:#2368AD;">{$product.name}</h4>
									{if $product.featuresdesc}
									    {$product.featuresdesc}
									{else}
									    <br />
									{/if}
								    </div>
								</td>
							    </tr>
							    {if $product.bid}
								<tr>
								    <td> <!-- Price Simple -->
									{$LANG.bundledeal}
								    	    {if $product.displayprice}
										<span class="text-secondary bolder" style="font-size: 33px;">{$product.displayPriceSimple}</span>
									    {/if}
								    </td>
								</tr>
							    {/if}
							    <tr style="height:60px;">
								<td> <!-- Price -->
	    							    {if $product.bid}
								    {elseif $product.paytype eq "free"}
									<mark style="font-size:160%;background-color:#2368AD;">{$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" style="color:#2368AD;">{$ccurrency["prefix"]}</span>&nbsp;
									<span class="cost" style="color:#2368AD;">{$product.pricing.minprice.price->toNumeric()}</span>&nbsp;
									<span class="suffix" style="color:#2368AD;" >{$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}
								    {if $product.pricing.minprice.setupFee}
								    	<div class="small text-muted">({$product.pricing.minprice.setupFee->toPrefixed()} {$LANG.ordersetupfee})</div>
								    {/if}
								</td>
							</tr>
							<!-- <tr> <td> <br /></td> </tr> -->
							<tr>
								<td> <!-- Product Details -->
								    <table class="plan-features collapse" id="PlanLists1" style="display:unset;">
									{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>
        	                                                                  {elseif $value == "Optional"} 
        	                                                                	<i class="fas fa-plus" 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}
								</td>
							</tr>
						</table>
						<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="position:absolute; left:20px; bottom:10px; right:20px; height:40px; width:unset;padding-top:6.5px;" id="product{$product@iteration}-order-button">
                                		    {$LANG.ordernowbutton}
                            			</a>
						    </table>
						</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>

<!-- End of Template: orderforms/thurdata/products.tpl -->