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

{% use '/common/form/form.wrapper.html.twig' %}

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

{% block body %}

    <div class="carName">
		<h2>{{ catalogInfo.name }}</h2>
	</div>

	<div class="layout">

		<div class="pageActions">
			{{ wo_render_breadcrumbs() }}
		</div>

		<table class="searchFormHolder">
			<tbody>
			{% for key, form in catalogInfo.forms %}
				{% if key in ['FINDVEHICLE_V2', 'WIZARD'] %}
					{% if key != 'FINDVEHICLE_V2' or cm.searchVin %}
						<td class="{{ loop.first ? 'searchVinCell' : 'parametersCell' }} " valign="top">
							{% set buttonLabel = loop.first ? 'Search' : 'Vehicle list' %}
							{{ block('formwrapper') }}
						</td>
						<td class="separator">
							<div class="separatorInner">&nbsp;</div>
						</td>
					{% endif %}
				{% endif %}
			{% endfor %}
			</tbody>
		</table>

	</div>

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

	<script type="module">
		import $ from 'jquery';

		function formReload(form) {
			$('#loader', form).show();
			$(form).load('{{ path('app_catalog_form_changed') }}', $(form).serialize(), () => {
				// not necesery but...
				$('#loader', form).hide();
			});
		}

		$('form.reactiveForm').each((i, form) => {

			// reload form on option change
			$(document).on('change', 'input, select', (e) => {
				formReload(form);

				e.preventDefault();
				return false;
			});

			// reset option and reload
			$(document).on('click', '.backlink', (e) => {
				const fieldName = $(e.currentTarget).data('field-name');

				// add hidden field with blank value
				let hiddenField = $('<input type="hidden" />');
				hiddenField.attr('name', fieldName);
				hiddenField.attr('value', '');
				$(form).append(hiddenField);

				formReload(form);

				e.preventDefault();
				return false;
			});
		});
	</script>


{% endblock %}