{config_load file="$language/lang_$language.conf" section="easy_checkout"}
{yes_vars assign="YES" contents=1}
{if $KLARNA_CLIENT_TOKEN}

<script>
var KLARNA_CLIENT_TOKEN = '{$KLARNA_CLIENT_TOKEN}';
var KLARNA_ADDRESS_DATA = JSON.parse('{$KLARNA_ADDRESS_DATA}');
var KLARNA_EASYCHECKOUT = true;
var KLARNA_CATEGORIES = JSON.parse('{$KLARNA_CATEGORIES}');
</script>
<script src="includes/klarna_yes_pay_later.js"></script>
<script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>

{/if}
<div class="uberuns boxes pb-5">
	<div class="container bg-light border border-secondary border-2 p-3 rounded-3 shadow ">
		{if $smarty.session.language=='german'}
			<h1 class="ico ico-3">Kaufabwicklung</h1>
		{else}
			<h1 class="ico ico-3">Checkout</h1>
		{/if}
	
		{if $error}
			<div class="alert alert-warning">
				{$error}
			</div>
		{/if}

		{if $info_message != ''}
			<div class="alert alert-primary">
				<div class="center_message_red {if $smarty.server.REQUEST_URI == '/checkout_shipping.php?info_message=Ihr+Coupon+wurde+erfolgreich+eingel%F6st+und+wird+bei+Ihrer+n%E4chsten+Bestellung+automatisch+eingel%F6st.'}alert_grn{else}alert{/if} callout columns">
					<b>{$info_message}</b>
				</div>
			</div>
		{/if}

		<div class="row mt-5">
			<div class="col-12">
				<div class="border-primary border-2 rounded border p-3 h-100 bg-light">
					{$MODULE_gift_cart}
				</div>
			</div>
		</div>

		{$FORM_ACTION}

		<div class="row mt-3">	
			<div class="col-12 col-lg-6">
				<div class="border-primary border-2 rounded border p-3 h-100 bg-light">
					<h3>{#title_address_shipping#}</h3>
					{$ADDRESS_LABEL}<br><br>
					<p class="text-gray">{#text_addressbook_shipping#}</p>
					{if $smarty.session.language=='german'}
						<a href="checkout_shipping_address.php" class="btn btn-primary float-end">Adresse ändern</a>
					{else}
						<a href="checkout_shipping_address.php" class="btn btn-primary float-end">Change address</a>
					{/if}
					<div class="clearfix"></div>
				</div>
			</div>

			<div class="col-12 col-lg-6">
				<div class="border-primary border-2 rounded border p-3 h-100 bg-light">
					<h3>{#title_address#}</h3>
					{$ADDRESS_LABEL2}<br><br>
					<p class="text-gray">{#text_address#}</p>
					{if $smarty.session.language=='german'}
						<a href="checkout_payment_address.php" class="btn btn-primary float-end">Adresse ändern</a>
					{else}
						<a href="checkout_payment_address.php" class="btn btn-primary float-end">Change address</a>
					{/if}
					<div class="clearfix"></div>
				</div>
			</div>
		</div>

		<div class="row mt-3">
			<div class="col-12 col-lg-6">
				<div class="border-primary border-2 rounded border p-3 h-100 bg-light">
					<h3>{#heading_shipping#}</h3>
					{$SHIPPING_BLOCK}
				</div>
			</div>

			<div class="col-12 col-lg-6">
				<div class="border-primary border-2 rounded border p-3 h-100 bg-light">
					<h3>{#title_payment#}</h3>
					{if $GV_COVER!='true'}
						{$PAYMENT_BLOCK}
						<div id="klarna_container"></div>
						{$module_gift}
					{else}
						{#text_gccover#}
					{/if}
				</div>
			</div>
		</div>

		<div class="row mt-3">
			<div class="col-12 col-lg-6">
				<div class="border-primary border-2 rounded border p-3 h-100 bg-light">
					{if $smarty.session.language=='german'}
						<h3 class="">Rechtliche Hinweise</h3>
						<a href="Unsere-AGB-_-3.html" class="btn btn-primary" target="_blank">AGB</a>
						<a href="Widerrufsbelehrung-_-9.html" class="btn btn-primary" target="_blank">Widerrufsbelehrung</a>
						<a href="Datenschutz-_-2.html" class="btn btn-primary" target="_blank">Datenschutzerklärung</a>
					{else}
						<h3 class="">Legal Information</h3>
						<a href="Unsere-AGB-_-3.html" class="btn btn-primary" target="_blank">Terms &amp; Conditions</a>
						<a href="Widerrufsbelehrung-_-9.html" class="btn btn-primary" target="_blank">Cancellation Policy</a>
						<a href="Datenschutz-_-2.html" class="btn btn-primary" target="_blank">Privacy Policy</a>
					{/if}
				</div>
			</div>

			<div class="col-12 col-lg-6">
				<div class="border-primary border-2 rounded border p-3 h-100 bg-light">
					{if $smarty.session.language=='german'}
						<h3 class="">Anmerkung zur Bestellung</h3>
					{else}
						<h3 class="">Order Comment</h3>
					{/if}
					{$COMMENTS|replace:'cols="60"':'class="w-100"'}
				</div>
			</div>
		</div>

		<div class="border-primary border-2 rounded border p-3 h-100 bg-light mt-3">
			<div class="mt-2 responsive-table">
				{if $smarty.session.language=='german'}
					<h3>{#title_order#}</h3>
				{else}
					<h3>{#title_order#}</h3>
				{/if}

				<table class="table">
					<thead>
						<tr>
							{if $smarty.session.language=='german'}
								<td class="thQty text-black">Menge</td>
								<td class="thImg text-black">Bild</td>
								<td class="thTitle text-black">Name</td>
								<td class="thInfo text-black">Lieferzeit*</td>
								<td class="thPrice text-black text-end">Einzelpreis</td>
								<td class="thPrice text-black text-end">Gesamtpreis</td>
							{else}
								<td class="thQty text-black">Quantity</td>
								<td class="thImg text-black">Image</td>
								<td class="thTitle text-black">Name</td>
								<td class="thInfo text-black">Delivery Time*</td>
								<td class="thPrice text-black text-end">Unit Price</td>
								<td class="thPrice text-black text-end">Total Price</td>
							{/if}
						</tr>
					</thead>

					{foreach item=product from=$PRODUCTS_ARRAY}
						<tr>
							<td class="tdImg">
								{$product.qty}&nbsp;x&nbsp;
							</td>
							<td style="width:100px;">
								<img class="w-100 rounded" src="images/product_images/info_images/{$product.PRODUCTS_IMAGE}" />
							</td>
							<td class="tdTitle">
								<h6 class="mt-1">{$product.name}</h6>
								{if $smarty.session.language=='german'}
									<span class="cart_artNr">Artikelnr.: {$product.model}</span>
								{else}
									<span class="cart_artNr">Item No.: {$product.model}</span>
								{/if}

								{if $product.CHARACTERISTICS}
									<br>
									{if $smarty.session.language=='german'}
										<a class="btn btn-outline-primary mt-2 btn btn-sm modal-call" href="#"
										   data-modaltitle="Artikelmerkmale"
										   data-modalsize="md"
										   data-modalcnt='
												{foreach from=$product.CHARACTERISTICS item=char}
													<table class="table">
														<tr>
															<td class="fw-bold">{$char.title}</td>
															<td class="text-end">{$char.value}</td>
														</tr>
													{/foreach}
													</table>
										   '>
											Artikelmerkmale
										</a>
									{else}
										<a class="btn btn-outline-primary mt-2 btn btn-sm modal-call" href="#"
										   data-modaltitle="Product Features"
										   data-modalsize="md"
										   data-modalcnt='
												{foreach from=$product.CHARACTERISTICS item=char}
													<table class="table">
														<tr>
															<td class="fw-bold">{$char.title}</td>
															<td class="text-end">{$char.value}</td>
														</tr>
													{/foreach}
													</table>
										   '>
											Product Features
										</a>
									{/if}
								{/if}
							</td>

							<td class="tdInfo">
								{if $smarty.session.language=='german'}
									<span class="show-for-small-only">Lieferzeit:</span>
								{else}
									<span class="show-for-small-only">Delivery Time:</span>
								{/if}
								{$product.shipping_time}
								{if $product.PRODUCTS_DATE_AVAILABLE}
									{if $smarty.session.language=='german'}
										/ <font color="red">verf&uuml;gbar ab: {$product.PRODUCTS_DATE_AVAILABLE}</font>
									{else}
										/ <font color="red">available from: {$product.PRODUCTS_DATE_AVAILABLE}</font>
									{/if}
								{/if}
							</td>

							<td class="tdPrice text-end">
								{if $smarty.session.language=='german'}
									<span class="show-for-small-only text-end">Einzelpreis:</span>
								{else}
									<span class="show-for-small-only text-end">Unit Price:</span>
								{/if}
								<span class="priceVal">{$product.price_formated}</span>
								<br class="clearfix">
							</td>

							<td class="tdPrice2 text-end">
								{if $smarty.session.language=='german'}
									<span class="show-for-small-only text-end">Summe:</span>
								{else}
									<span class="show-for-small-only text-end">Total:</span>
								{/if}
								<span class="priceVal">{$product.final_price_formated}</span>
								<br class="clearfix">
							</td>
						</tr>
					{/foreach}

					<tr>
						<td colspan="3"></td>
						<td colspan="3">
							<span id="displayResponse" class="float-end">
								{$response|replace:'Kupons:':''|replace:'0.0 % + ':''|replace:'Bezahlart':'Nachnahmegeb&uuml;hr'|replace:' Gebuehren':''}
							</span>
						</td>
					</tr>

				</table>
			</div>		
		</div>

		<div class="small-12 columns space10bottom mt-3">
			<div class="bg-dark rounded rounded-2 p-3 ">
				<div class="btnafloat">
					{if $smarty.session.language=='german'}
						<button id="checkout_submit_button" type="submit" class="btn-primary btn float-end fs-5">zahlungspflichtig bestellen</button>
						<a href="shopping_cart.php" class="btn mt-1 me-2 btn-secondary btn-sm float-start">Bestellung bearbeiten</a>
					{else}
						<button id="checkout_submit_button" type="submit" class="btn-primary btn float-end fs-5">Place binding order</button>
						<a href="shopping_cart.php" class="btn mt-1 me-2 btn-secondary btn-sm float-start">Edit order</a>
					{/if}
					<span class="clearfix"></span>
				</div>
			</div>
		</div>

	</div>
	{$FORM_END}
</div>