{{ include_javascript('javascripts/vendor/vue/vue.js') }}

{{ include_javascript('javascripts/vendor/sortablejs/sortable.js') }}
{{ include_javascript('javascripts/vendor/vuedraggable/vuedraggable.js') }}
{{ include_javascript('tools/bazar/presentation/javascripts/list-form.js', false, true) }}
{{ include_css('tools/bazar/presentation/styles/list-form.css') }}

<form method="post" @submit="onSubmit" class="list-form form-horizontal" data-list="{{ list|json_encode }}">
	<div class="control-group form-group">
		<label class="control-label col-sm-3">
			<span class="required_symbol">*&nbsp;</span>
			{{ _t('BAZ_LIST_NAME') }}
		</label>
		<div class="controls col-sm-9">
			<input type="text" v-model="title" name="title" 
			       placeholder="{{ _t('BAZ_LIST_NAME') }}" class="form-control" required/>
		</div>
	</div>

	{# List Nodes #}
	<label class="control-label">{{ _t('BAZ_VALEURS_LISTE') }}</label>
	<div class="nodes-container">
		<list-node :node="rootNode" :depth="0" :index="0"></list-node>
	</div>
	{# Hidden JSON Nodes #}
	<input type="hidden" name="nodes" :value="jsonNodes" />

	{# Form Actions #}
	<div class="form-actions form-group">
		<div class="col-sm-9 col-sm-offset-3">
			<button class="btn btn-primary" type="submit" name="submit">
				{{ _t('BAZ_SAVE') }}
			</button>
			<a class="btn btn-default" href="{{ url({ params: { vue: 'listes' }})|raw }}">
				{{ _t('BAZ_ANNULER') }}
			</a>
		</div>
	</div>
</div>
