<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
<script>
	$(function()
	{
		formCatalogFilter("<?= $arParams['PATH']; ?>", "<?= $arParams['PROGRAM']; ?>", <?= CUtil::PhpToJSObject($arResult['SELECTED']); ?>);
		<? if($arResult['SCROLL']): ?>
			$('html, body').animate({
				scrollTop: $("#catalog").offset().top - 100
			}, 200);
		<? endif; ?>
	});
</script>
<style type="text/css">
	@keyframes catalog_filter_spinner_animation {
		0% { transform: translate(-50%,-50%) rotate(0deg); }
		100% { transform: translate(-50%,-50%) rotate(360deg); }
	}
	.catalog_filter_spinner_animation div {
		position: absolute;
		width: 65px;
		height: 65px;
		border: 5px solid #ffffff;
		border-top-color: transparent;
		border-radius: 50%;
	}
	.catalog_filter_spinner_animation div {
		animation: catalog_filter_spinner_animation 1s linear infinite;
		top: 50px;
		left: 50px
	}
	#catalog_filter_spinner {
		width: 28px;
		height: 28px;
		display: inline-block;
		overflow: hidden;
		background: none;
	}
	.catalog_filter_spinner_animation {
		width: 100%;
		height: 100%;
		position: relative;
		transform: translateZ(0) scale(0.28);
		backface-visibility: hidden;
		transform-origin: 0 0; /* see note above */
	}
	.catalog_filter_spinner_animation div { box-sizing: content-box; }
</style>
<form method="GET" action="/catalog/" id="catalog_filter_form">
	<div class="filter_header">
		<div class="tabs">
			<?
				/*
				<div class="tab active">Новые</div>
				<div class="tab">С пробегом</div>
				<div class="tab">Все</div>
				*/
			?>
		</div>
		<a href="#" class="button button-blue" id="catalog_filter_search_button">
			<div id="catalog_filter_spinner">
				<div class="catalog_filter_spinner_animation">
					<div></div>
				</div>
			</div>
			<span id="catalog_filter_search_button_counter" style="display:none;"></span>
		</a>
	</div>
	<div class="filter_body">
		<div class="filter_column">
			<div class="form_field">
				<select id="filter_brands">
					<option value="" disabled selected>Марка</option>
				</select>
			</div>
			<div class="fieldgroup">
				<div class="form_field">
					<select id="filter_bodies">
						<option value="" disabled selected>Кузов</option>
					</select>
				</div>
				<div class="form_field">
					<select id="filter_gears">
						<option value="" disabled selected>Коробка</option>
					</select>
				</div>
			</div>
		</div>
		<div class="filter_column">
			<div class="form_field">
				<select id="filter_models">
					<option value="" disabled selected>Модель</option>
				</select>
			</div>
			<div class="fieldgroup">
				<div class="form_field">
					<select id="filter_engine_fuels">
						<option value="" disabled selected>Двигатель</option>
					</select>
				</div>
				<div class="form_field">
					<select id="filter_drives">
						<option value="" disabled selected>Привод</option>
					</select>
				</div>
			</div>
		</div>
		<div class="filter_column">
			<div class="form_field">
				<select id="filter_modifications">
					<option value="" disabled selected>Модификация</option>
				</select>
			</div>
			<div class="fieldgroup">
				<div class="form_field">
					<select id="filter_engine_volume_from">
						<option value="" disabled selected>Объем, от</option>
						<? $i = 100; ?>
						<? while($i < 7100): ?>
							<option value="<?= $i; ?>">От <?= is_float($i / 1000) ? $i / 1000 : ($i / 1000).".0"; ?> л.</option>
							<? $i = $i + 100; ?>
						<? endwhile; ?>
					</select>
				</div>
				<div class="form_field">
					<select id="filter_engine_volume_to">
						<option value="" disabled selected>Объем, до</option>
						<? $i = 100; ?>
						<? while($i < 7100): ?>
							<option value="<?= $i; ?>">До <?= is_float($i / 1000) ? $i / 1000 : ($i / 1000).".0"; ?> л.</option>
							<? $i = $i + 100; ?>
						<? endwhile; ?>
					</select>
				</div>
			</div>
			<?
			/*
				<div class="fieldgroup">
					<div class="form_field">
						<input type="number" id="engine_power_from" placeholder="Мощность л.с. от">
					</div>
					<div class="form_field">
						<input type="number" id="engine_power_to" placeholder="Мощность л.с. до">
					</div>
				</div>
			*/
			?>
		</div>
	</div>
</form>