<{capture name="title"}>Søgning: <{$get.search}><{/capture}>

<{if $get.search}>
	<h1>Søgning efter "<{$get.search|escape}>"</h1>
<{else}>
	<h1>Søgning</h1>
<{/if}>

<script type="text/javascript">
	$(document).ready(function() {
		autocomplete(document.getElementById("search-box"));
	});
</script>

<form action="<{$webshop->getUrl()|escape}>/search" autocomplete="off">
	<div class="row my-4">
		<div class="col-md-6 col-8">
			<div class="form-group autocomplete" style="display:block;">
				<input id="search-box" style="width:100%;" type="text" name="search" value="<{$get.search|escape}>" placeholder="<{$data.placeholder|escape}>"/>
			</div>
		</div>
		<div class="col col-4">
			<input class="btn btn-primary" type="submit" value="Søg" class="button" style="padding:13px;"/>
		</div>
	</div>
</form>

<{assign var="product" value=$webshop->getProductBySku($get.search)}>
<{if $product}>
	<div class="products mb-4">
		<div class="row">
			<div class="col-lg-3 col-md-4 col-6 mb-3">
				<{include file="inner-product.html" product=$product}>
			</div>
		</div>
	</div>
<{/if}>

<{if $landing_pages || $categories || $blog_posts || $pages}>
	<div class="row">

		<{section name="i" loop=$landing_pages}>
			<{assign var="images" value=$landing_pages[i]->getImages()}>

			<div class="col-10 col-md-4">
				<a href="<{$landing_pages[i]->getRemoteUrl()|escape}>" class="img-caption" >
					<figure>
						<{if $images}>
							<img src="<{$images[0]->getSrc(420, 204, 'box')}>" alt="" />
						<{else}>
							<img src="images/featured_img_1.jpg" alt="" />
						<{/if}>
						<figcaption>
							<h3><{$landing_pages[i]->getName()|escape}></h3>
							<span>Se alle produkter</span>
						</figcaption>
					</figure>
				</a>
			</div>
		<{/section}>

		<{section name="i" loop=$categories}>
			<{assign var="images" value=$categories[i]->getImages()}>

			<div class="col-10 col-md-4">
				<a href="<{$categories[i]->getRemoteUrl()|escape}>" class="img-caption" >
					<figure>
						<{if $images}>
							<img src="<{$images[0]->getSrc(420, 204, 'box')}>" alt="" />
						<{else}>
							<img src="images/featured_img_1.jpg" alt="" />
						<{/if}>
						<figcaption>
							<h3><{$categories[i]->getName()|escape}></h3>
							<span>Se alle produkter</span>
						</figcaption>
					</figure>
				</a>
			</div>
		<{/section}>

		<{section name="i" loop=$blog_posts}>
			<{assign var="images" value=$blog_posts[i]->getImages()}>

			<div class="col-10 col-md-4">
				<a href="<{$blog_posts[i]->getRemoteUrl()|escape}>" class="img-caption" >
					<figure>
						<{if $images}>
							<img src="<{$images[0]->getSrc(420, 204, 'box')}>" alt="" />
						<{else}>
							<img src="images/featured_img_1.jpg" alt="" />
						<{/if}>
						<figcaption>
							<h3><{$blog_posts[i]->getTitle()|escape}></h3>
							<span>Læs mere</span>
						</figcaption>
					</figure>
				</a>
			</div>
		<{/section}>

		<{section name="i" loop=$pages}>
			<{assign var="images" value=$pages[i]->getImages()}>

			<div class="col-10 col-md-4">
				<a href="<{$pages[i]->getRemoteUrl()|escape}>" class="img-caption" >
					<figure>
						<{if $images}>
							<img src="<{$images[0]->getSrc(420, 204, 'box')}>" alt="" />
						<{else}>
							<img src="images/featured_img_1.jpg" alt="" />
						<{/if}>
						<figcaption>
							<h3><{$pages[i]->getHeadline()|escape}></h3>
							<span>Læs mere</span>
						</figcaption>
					</figure>
				</a>
			</div>
		<{/section}>

	</div>
<{/if}>

<div class="products mb-4">
	<div class="row">
		<{section name="productlist" loop=$products}>
			<div class="col-lg-3 col-md-4 col-6 mb-3">
				<{include file="inner-product.html" product=$products[productlist]}>
			</div>
		<{/section}>
	</div>
</div>

<{include file="carousel.html" title="Populært lige nu" products=$webshop->getPopularProducts(25, 14)}>

<{if $pager}>
	<{assign var="pages" value=$pager->render()}>
	<{if $pages}>
		<p class="pager" id="pager"><{$pages}></p>
	<{/if}>
<{/if}>