{% extends "@bazar/layouts/input.twig" %}

{% block input %}
	{% if displaySelectAllLimit and data|length > displaySelectAllLimit %}
		{{ _self.checkAll() }}
	{% endif %}
  {% for node in data %}
    {{ _self.node(node, field, values, displaySelectAllLimit) }}
  {% endfor %}

	{{ include_css('tools/bazar/presentation/styles/inputs/checkbox-tree.css') }}
	{{ include_javascript('tools/bazar/presentation/javascripts/inputs/checkbox-tree.js') }}
{% endblock %}

{% macro node(node, field, values, displaySelectAllLimit) %}
{% set checked = node.id in values %}
	<div class="node-container {% if checked %}expanded{% endif %}">
		{% set name = field.propertyName ~ '[' ~ node.id ~ ']' %}
		<div class="checkbox checkbox-node">
			<label for="{{ name }}">
				<input type="checkbox" id="{{ name }}" value="1" name="{{ name }}" 
				       {% if checked %} checked {% endif %} />
				{# Those two spans are needed, the first one contains both the label + the checkboxed drawn with css 
					 with :after and :before pseudo element. We want the behaviour to differ depending on where the user clicks #}
				<span>
						<span class="checkbox-label">
							{{ node.label|raw }}
							{% if node.children|length > 0 %}
								<i class="chevron-icon fa fa-chevron-right"></i>
							{% endif %}
						</span>		
				</span>
			</label>
		</div>
		<div class="node-children children-of-{{ node.id }}" {% if checked %}style="display: block;"{% endif %}>
			<div class="border"></div>
			{% if displaySelectAllLimit and node.children|length > displaySelectAllLimit %}
				{{ _self.checkAll() }}
			{% endif %}
			{% for childNode in node.children %}
					{{ _self.node(childNode, field, values, displaySelectAllLimit) }}
			{% endfor %}
		</div>
	</div>
{% endmacro %}

{% macro checkAll() %}
	<div class="checkbox check-all-container">
		<label>
			<input type="checkbox" class="check-all" />
			<span>{{ _t('BAZAR_CHECKALL') }}</span>
		</label>
	</div>
{% endmacro %}





