{% extends '../_layouts/_main.twig' %}
{% block content %}
	<div class="panel panel-tabs">
		<ul class="nav nav-tabs nav-tabs_b">
			<li>
				<a href="uni-goods.html">Супергруппы</a>
			</li>
			<li class="active">
				<a href="uni-goods--categories.html">Категории</a>
			</li>
			<li>
				<a href="uni-goods--goods.html">Товары</a>
			</li>
		</ul>
		<div class="panel-body">

			<div class="cp-uni-goods">
				<form class="cpug-form">
					<div class="cpug-form__side">
						<div class="form-group">
							<div class="form-label">Найти</div>
							<div class="input-group">
								<input class="form-control" type="text" value="" />
								<div class="input-group-btn">
									<button class="btn btn-primary"><i class="fa fa-search"></i></button>
								</div>
							</div>
						</div>
					</div>
					<div class="cpug-form__body">
						<div class="form-group">
							<div class="form-label">Категории</div>
							<div class="form-field watcher" data-reset-text="Сбросить">
								<select class="form-control selectpicker" data-container="body" multiple data-actions-box="true" data-select-all-text="Выбрать всё" data-deselect-all-text="Убрать всё" data-none-selected-text="Сделайте выбор">
									<option>Супергруппа</option>
									<option selected>Просмотры</option>
									<option>Покупки</option>
									<option>Покупки %</option>
									<option>Без «В корзину» %</option>
									<option>Фото 360 %</option>
									<option>Вес указан %</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="form-label">Показать колонки</div>
							<div class="form-field watcher" data-reset-text="Сбросить">
								<select class="form-control selectpicker" data-container="body" multiple data-actions-box="true" data-select-all-text="Выбрать всё" data-deselect-all-text="Убрать всё" data-none-selected-text="Сделайте выбор">
									<option>Кузов</option>
									<option>Оптика</option>
									<option>Запчасти для тюнинга</option>
									<option selected>Зеркала</option>
									<option selected>Фильтры</option>
									<option selected>Тормоза</option>
									<option selected>Подвеска и управление</option>
									<option selected>Амортизаторы и пружины</option>
									<option selected>Электрика</option>
									<option selected>Охлаждение</option>
									<option selected>Двигатель</option>
									<option>Привод</option>
									<option>Ремни и ролики</option>
									<option>Элементы подвески и системы управления</option>
									<option>Газовые пружины</option>
									<option>Элементы охраны</option>
									<option>Стеклоочистители</option>
									<option>Переключатели</option>
									<option>Салон</option>
								</select>
							</div>
						</div>
					</div>
				</form>

				<div class="cpug-table">
					<div class="scroller-x">
						<div class="sticky-header fixed" data-offset="40">
							<div class="sticky-header__head">
								<table class="table">
									<thead class="thead-clear">
									<tr>
										<th>Найдено: <strong>32</strong></th>
										<th class="rotate">
											<div class="rotate-title"><span title="Просмотры">Просмотры</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Покупки">Покупки</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Покупки %">Покупки %</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Без «В корзине»">Без «В корзине»</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Фото 360 %">Фото 360 %</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Вес указан">Вес указан</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Вес указан %">Вес указан %</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Просмотры">Просмотры</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Покупки">Покупки</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Покупки %">Покупки %</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Без «В корзине»">Без «В корзине»</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Фото 360 %">Фото 360 %</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Вес указан">Вес указан</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Вес указан %">Вес указан %</span></div>
										</th>
									</tr>
									</thead>
									<thead class="thead-gray">
									<tr>
										<th>
											<span class="js-table-sort">Категории <i class="js-table-sort-arr"></i></span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
									</tr>
									</thead>
									<thead class="thead-blue">
									<tr>
										<th></th>
										<th class="text-right">14093</th>
										<th class="text-right">298</th>
										<th class="text-right">15.8</th>
										<th class="text-right">2.3</th>
										<th class="text-right">0.6</th>
										<th class="text-right">0.8%</th>
										<th class="text-right">72.2%</th>
										<th class="text-right">14093</th>
										<th class="text-right">298</th>
										<th class="text-right">15.8</th>
										<th class="text-right">2.3</th>
										<th class="text-right">0.6</th>
										<th class="text-right">0.8%</th>
										<th class="text-right">72.2%</th>
									</tr>
									</thead>
								</table>
							</div>
							<div class="sticky-header__body">
								<table class="table sticky-header__sizer">
									<thead class="thead-clear">
									<tr>
										<th>Найдено: <strong>32</strong></th>
										<th class="rotate">
											<div class="rotate-title"><span title="Просмотры">Просмотры</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Покупки">Покупки</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Покупки %">Покупки %</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Без «В корзине»">Без «В корзине»</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Фото 360 %">Фото 360 %</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Вес указан">Вес указан</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Вес указан %">Вес указан %</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Просмотры">Просмотры</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Покупки">Покупки</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Покупки %">Покупки %</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Без «В корзине»">Без «В корзине»</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Фото 360 %">Фото 360 %</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Вес указан">Вес указан</span></div>
										</th>
										<th class="rotate">
											<div class="rotate-title"><span title="Вес указан %">Вес указан %</span></div>
										</th>
									</tr>
									</thead>
									<thead class="thead-gray">
									<tr>
										<th>
											<span class="js-table-sort">Категории <i class="js-table-sort-arr"></i></span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
										<th>
											<span class="js-table-sort xs"><i class="js-table-sort-arr"></i>&nbsp;</span>
										</th>
									</tr>
									</thead>
									<thead class="thead-blue">
									<tr>
										<th></th>
										<th class="text-right">14093</th>
										<th class="text-right">298</th>
										<th class="text-right">15.8</th>
										<th class="text-right">2.3</th>
										<th class="text-right">0.6</th>
										<th class="text-right">0.8%</th>
										<th class="text-right">72.2%</th>
										<th class="text-right">14093</th>
										<th class="text-right">298</th>
										<th class="text-right">15.8</th>
										<th class="text-right">2.3</th>
										<th class="text-right">0.6</th>
										<th class="text-right">0.8%</th>
										<th class="text-right">72.2%</th>
									</tr>
									</thead>
									<tbody>
									<tr>
										<td data-sort="кузов">
											<a href="#">Защитная плёнка</a>
											<span class="color-gray">AL2093838</span>
										</td>
										<td data-sort="19345" class="text-right">19345</td>
										<td data-sort="267" class="text-right highlight-success">267</td>
										<td data-sort="19.4" class="text-right">19.4</td>
										<td data-sort="2.4" class="text-right">2.4</td>
										<td data-sort="0.3" class="text-right">0.3</td>
										<td data-sort="69.4" class="text-right">69.4</td>
										<td data-sort="15345" class="text-right">15345</td>
										<td data-sort="19345" class="text-right">19345</td>
										<td data-sort="267" class="text-right highlight-success">267</td>
										<td data-sort="19.4" class="text-right">19.4</td>
										<td data-sort="2.4" class="text-right">2.4</td>
										<td data-sort="0.3" class="text-right">0.3</td>
										<td data-sort="69.4" class="text-right">69.4</td>
										<td data-sort="15345" class="text-right">15345</td>
									</tr>
									<tr>
										<td data-sort="оптика">
											<a href="#">Рамка номерного знака</a>
											<span class="color-gray">AL200585</span>
										</td>
										<td data-sort="21093" class="text-right">21093</td>
										<td data-sort="123" class="text-right">123</td>
										<td data-sort="17.7" class="text-right">17.7</td>
										<td data-sort="12" class="text-right highlight-success">12</td>
										<td data-sort="0.75" class="text-right">0.75</td>
										<td data-sort="61.7" class="text-right highlight-danger">61.7</td>
										<td data-sort="18222" class="text-right">18222</td>
										<td data-sort="23111" class="text-right">23111</td>
										<td data-sort="191" class="text-right">191</td>
										<td data-sort="41.1" class="text-right">41.1</td>
										<td data-sort="7.1" class="text-right highlight-success">7.1</td>
										<td data-sort="1.2" class="text-right">1.2</td>
										<td data-sort="76.55" class="text-right highlight-danger">76.55</td>
										<td data-sort="21211" class="text-right">21211</td>
									</tr>
									<tr>
										<td data-sort="тормоза">
											<a href="#">Тормозной шланг</a>
											<span class="color-gray">AL203655</span>
										</td>
										<td data-sort="17617" class="text-right">17617</td>
										<td data-sort="213" class="text-right">213</td>
										<td data-sort="32.1" class="text-right">32.1</td>
										<td data-sort="9.1" class="text-right highlight-success">9.1</td>
										<td data-sort="1.12" class="text-right highlight-success">1.12</td>
										<td data-sort="54.7" class="text-right highlight-success">54.7</td>
										<td data-sort="12333" class="text-right highlight-success">12333</td>
										<td data-sort="21892" class="text-right">21892</td>
										<td data-sort="326" class="text-right highlight-danger">326</td>
										<td data-sort="31.6" class="text-right highlight-danger">31.6</td>
										<td data-sort="1.7" class="text-right highlight-success">1.7</td>
										<td data-sort="0.45" class="text-right highlight-success">0.45</td>
										<td data-sort="43.7" class="text-right">43.7</td>
										<td data-sort="21929" class="text-right">21929</td>
									</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
{% endblock %}