{if slider}
<div class="teaser">
	
	<span></span>
	
	<a href="#" class="prev"><span></span></a>
	<a href="#" class="next"><span></span></a>
	
	<div class="images">
	{for sliders}
		<div style="background: url('{slider_image}');background-position: {slider_image_left}% {slider_image_top}% !important">
			<div class="text" style="left:{slider_text_left}%;top:{slider_text_top}%">
				<h2>{slider_headline}</h2>
				<p>{slider_text}</p>
				<a href="{slider_link}" target="{slider_link_target}">{slider_link_text}</a>
			</div>
		</div>
	{endfor sliders}
	</div>
	
	
	
	
	
	<div class="counter">
		<span class="big-number">{traktor}<span><a href="{html_root}/{link_traktor}">##traktoren##</a></span></span>
		<span class="big-number">{feldhaecksler}<span><a href="{html_root}/{link_feldhaecksler}">##feldhaecksler##</a></span></span>
		<span class="big-number">{maehdrescher}<span><a href="{html_root}/{link_maehdrescher}">##maehdrescher##</a></span></span>
	</div>

	<span></span>
	
</div>
<script>
	slider = 1;
	const steps = document.querySelectorAll(".images > div").length;
	function move_slider(d) {
		event.preventDefault();
		(d=="next" ? slider++ : slider--);
		if(slider>steps) slider = 1;
		if(slider=="0") slider = steps;
		document.querySelector(".images").style.transform = "translateX(-" + ((slider * 100) - 100) + "%)";
		return false;
	}
	document.querySelector('.prev').addEventListener('click',function(){return move_slider('prev')});
	document.querySelector('.next').addEventListener('click',function(){return move_slider('next')});
</script>
{endif slider}

<div class="container">
	
	{if teaser0}
	<div class="row news">
		{for teaser0}
		<article class="news-{teaser_teaser}{teaser_big_class}">
			<figure style="background: url({teaser_foto})"><a href="{teaser_url}" target="{teaser_target}"></a></figure>
			<span class="headline"><a href="{teaser_url}" target="{teaser_target}">{teaser_headline}</a></span>
			<span class="text">{teaser_excerpt}</span>
			<a href="{teaser_url}" target="{teaser_target}">##mehr-erfahren##</a>
		</article>
		{endfor teaser0}
	</div>
	{endif teaser0}

	<div class="vehicle-list-column">
		<span class="h1">Highlights</span>
		<span></span>
		<span class="h1">##suche##</span>
	</div>

	<div class="vehicle-list-column">
		{for maschinen1}
		<article>
			<span class="h3"><a href="{html_root}{vehicle_link}" title="{vehicle_title}">{vehicle_marke}<span>{vehicle_modell}</span></a></span>
			<figure style="background: url({html_root}/{vehicle_pic})"><a href="{html_root}{vehicle_link}" title="{vehicle_title}"><img src="{html_root}/{vehicle_pic}" alt="{vehicle_title}" /></a></figure>
			{vehicle_preis}
			<address><i class="fas fa-fw fa-xs fa-map-marker-alt"></i> {vehicle_ort}</address>
			<a href="{html_root}{vehicle_link}" title="{vehicle_title}" class="btn">##zum-angebot##</a>
		</article>
		{endfor maschinen1}
		<form action="{html_root}{page}/" method="post">
			<span class="path-wrap"><input type="text" name="fulltextsearch" placeholder="##volltextsuche##" /></span>
			<label>##kategorie##</label>
			<span class="path-wrap"><select name="kategorie_id"><option value="">##bitte-waehlen##</option>{for kategorien}<option value="{kategorie_id}"{kategorie_selected}>##{kategorie_kategorie}## > ##{kategorie_unterkategorie}##</option>{endfor kategorien}</select></select></span>
			<label>##marke##</label>
			<span class="path-wrap"><select name="marke_id"><option value="">##bitte-waehlen##</option>{for marken}<option value="{marke_id}"{marke_selected}>{marke_marke}</option>{endfor marken}</select></span>
			<label>##standort##</label>
			<span class="path-wrap"><select name="standort_id"><option value="">##bitte-waehlen##</option>{for standorte}<option value="{standort_id}"{standort_selected}>{standort_standort}, {standort_ort}</option>{endfor standorte}</select></select></span>
			<div><a href="{html_root}{page}/" class="btn"><span>{found}</span> ##ergebnisse-anzeigen##</a></div>
		</form>
	</div>

	{if teaser1}
	<div class="row news">
		{for teaser1}
		<article class="news-{teaser_teaser}{teaser_big_class}">
			<figure style="background: url({teaser_foto})"><a href="{teaser_url}" target="{teaser_target}"></a></figure>
			<span class="headline"><a href="{teaser_url}" target="{teaser_target}">{teaser_headline}</a></span>
			<span class="text">{teaser_excerpt}</span>
			<a href="{teaser_url}" target="{teaser_target}">##mehr-erfahren##</a>
		</article>
		{endfor teaser1}
	</div>
	{endif teaser1}

	{if news}
	<span class="h1">Aktuelles</span>
	<div class="row news">
		{for news}
		<article class="news-{news_teaser}{news_big_class}">
			<figure style="background: url({news_foto})"><a href="{html_root}{news_url}"></a></figure>
			<span class="headline"><a href="{html_root}{news_url}">{news_headline}</a></span>
			<span class="text">{news_excerpt}</span>
			<time><i class="fas fa-fw fa-calendar-alt"></i> {news_datum}</time>
			<a href="{html_root}{news_url}">##mehr-erfahren##</a>
		</article>
		{endfor news}
	</div>
	{endif news}

	{if teaser2}
	<div class="row news">
		{for teaser2}
		<article class="news-{teaser_teaser}{teaser_big_class}">
			<figure style="background: url({teaser_foto})"><a href="{teaser_url}" target="{teaser_target}"></a></figure>
			<span class="headline"><a href="{teaser_url}" target="{teaser_target}">{teaser_headline}</a></span>
			<span class="text">{teaser_excerpt}</span>
			<a href="{teaser_url}" target="{teaser_target}">##mehr-erfahren##</a>
		</article>
		{endfor teaser2}
	</div>
	{endif teaser2}
</div>



<script>
	var http = null;
	var http_kat = null;
	const lang = '{lang}';
	function sendData() {
		qs = new Array();
		q = document.querySelectorAll("select");
		for(i = 0; i < q.length; i++){
			qs.push(q[i].name+'='+q[i].value);
		};
		q = document.querySelectorAll("input");
		for(i = 0; i < q.length; i++){
			qs.push(q[i].name+'='+q[i].value);
		};
		/*alert(qs.join("&"));*/

		if (window.XMLHttpRequest) {
			http = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			http = new ActiveXObject("Microsoft.XMLHTTP");
		}
		if (http != null) {
			http.open("POST", "{html_root}/machines/?ajax=1&"+qs.join("&"), true);
			http.onreadystatechange = showHits;
			http.send(null);
		}
		event.preventDefault();
		return false;
	}
	function showHits() {
		if (http.readyState == 4) {
			/*alert(http.responseText);*/
			document.querySelector("form .btn span").innerHTML = http.responseText;
		}
	}
	
	
	function getMarke(kat) {
		if (window.XMLHttpRequest) {
		   http_kat = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
		   http_kat = new ActiveXObject("Microsoft.XMLHTTP");
		}
		if (http_kat != null) {
			/*alert("{html_root}/machines/?ajax=1&show_ajax=marken_option&ajax_lang="+lang+"&kategorie_id="+kat+"&ajax_marke_id="+document.querySelector('select[name="marke_id"]').value);*/
			http_kat.open("POST", "{html_root}/machines/?ajax=1&show_ajax=marken_option&ajax_lang="+lang+"&kategorie_id="+kat+"&ajax_marke_id="+document.querySelector('select[name="marke_id"]').value, true);
			http_kat.onreadystatechange = showMarke;
			http_kat.send(null);
		}
		return false;
	}
	function showMarke() {
		/*alert(http_kat.responseText);*/
		document.querySelector('select[name="marke_id"]').innerHTML = http_kat.responseText;
		sendData();
	}
	
	
	q = document.querySelectorAll("select");
	for(i = 0; i < q.length; i++){
		q[i].addEventListener('change',function(e){if(this.name=="kategorie_id") getMarke(this.value);return sendData();});
	}
	q = document.querySelectorAll("input");
	for(i = 0; i < q.length; i++){
		q[i].addEventListener('change',function(e){return sendData();});
		q[i].addEventListener('keyup',function(e){return sendData();});
	}
	sendData();
	
	
	document.querySelector("form").addEventListener('submit',function(){event.preventDefault();location.reload();return false;});
	
	/*document.querySelector('select[name="kategorie_id"]').addEventListener('change',function(e){getMarke(this.value);});*/
</script>