{% extends 'base.html.twig' %}

{% block title %}
	{{ 'Brand list'|trans }}
{% endblock %}

{% block body %}

	<div class="carName carDetail">
		{% if vehicle is defined %}
			<h2>{{ vehicle.brand }} {{ vehicle.model }}</h2>
		{% endif %}
	</div>

	<div id="viewSwitch">
		<div id="treeViewTab" class="viewSwitchButton">
			<a href="{{ path('app_catalog_group_list', {categoryToken: categoryToken, groupToken: groupToken}) }}">
				{{ 'Search by groups'|trans }}
			</a>
		</div>
		<div id="categoryViewTab" class="viewSwitchButton active">
			{{ 'Search by pictures'|trans }}
		</div>
		<div class="line">&nbsp;</div>
	</div>

	<div class="cleaner"></div>

	<div class="layout vehicleListHolder">

		<div class="pageActions">
			{{ wo_render_breadcrumbs() }} | <a href="javascript:window.print()">Print</a>
		</div>

		<div id="treeView">
			<input type='text' id="filterSearch" placeholder="{{ 'Search'|trans }}" autocomplete="off" />

			<table class="tree">
				<tbody>
					<tr>
						<td class="tree">
							<h2> {{ 'Categories'|trans }}</h2>
							<div id="itemsTree"></div>
						</td>
						<td>
							<div id="itemsContentLoader" style="display: none;">{{ 'Loading'|trans}} ...</div>
							<div id="itemsContent"></div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	  
	</div>

	<div class="cleaner"></div>

	{# Filter modal #}
	<div id="filterForm" title="{{ 'Car specification'|trans }}" style="display: none;">
		<div id="filterFormLoader" style="display: none;">{{ 'Loading'|trans}} ...</div>
		<div id="filterFormContent"></div>
	</div>

	{% include "common/items.js.module.twig" with { 'itemsPath': path('app_catalog_category_unit_list') } %}

{% endblock %}

{% block javascripts %}

	{{ parent() }}

	{% include "common/items.js.twig" with { 'itemsPath': path('app_catalog_category_unit_list') } %}

{% endblock %}

{% block stylesheets %}

	{{ parent() }}

	<link href="/js/jquery-ui-1.14.0.custom/jquery-ui.min.css" rel="stylesheet">
	<link href="/js/jquery-ui-1.14.0.custom/jquery-ui.theme.min.css" rel="stylesheet">
	
{% endblock %}