{% from "components/map/marker-shape.html.njk" import markerShape, icon %}
{% macro renderItem(category, recursive, displayCheckbox, config, topSeparator = false) %}
{% set isCheckable = category.useForFiltering %}

<div class="category-wrapper">

	{# ---- CATEGORY TITLE IF REQUIRED ----- #}
	{% if category.displayInMenu %}
	<li class="subcategory-item {{  'expanded' if category.showExpanded else '' }} {{ 'unexpandable' if category.unexpandable }} {{ 'uncheckable' if not isCheckable }} {{ 'top-separator' if topSeparator }}" id="category-{{category.id}}">

		{# --- NAME--- #}
		<div class="name-wrapper {{ 'tooltipped' if not category.unexpandable }}" data-category-id='{{ category.id }}' data-position="right" data-delay="400" data-tooltip="{{ 'show.hide.detail' | i18n }}" >
			<span class="name">{{ category.nameShort }}</span>
			{% if not category.unexpandable %}<div class="arrow-after"></div>	{% endif %}
		</div>

		{% if displayCheckbox or config.theme == 'transiscope' %}
			{# --- CHECKBOX ---- #}
			<div class="checkbox-wrapper" data-category-id='{{ category.id }}'>
				<div class="checkbox-container">
			      <input type="checkbox" class="subcategorie-checkbox filled-in" id="subcategorie-checkbox-{{ category.id }}" checked="checked" data-category-id='{{ category.id }}'/>
			      <label for="subcategorie-checkbox-{{ category.id }}"></label>
				</div>
			</div>
		{% endif %}
	</li>
	{% endif %}

	{# ---- CATEGORY LIST OPTIONS ----- #}
	<div class="options-wrapper" {% if not category.showExpanded %} style="display:none"{% endif %}>
		{% for option in category.options %}

			{% set isSubcategories = recursive and option.subcategories|length and option.displayChildrenInMenu %}

	    <li class="subcategorie-option-item row
	    					{{ 'option-collapsible' if isSubcategories}} {{ 'expanded' if option.showExpanded }}
	    					{{ 'unexpandable' if option.unexpandable }}
	    					{{ 'tooltipped' if option.textHelper }}
	    					{{ 'uncheckable' if not isCheckable }}"
	    		id="option-{{ option.id }}" data-option-id='{{ option.id }}'
	    		data-position="right" data-delay="700" data-tooltip="{{ option.textHelper | capitalize }}"
	    		{% if not option.displayInMenu %} style="display:none"{% endif %}>

	    		{# --- ICON & NAME--- #}
					{% set withIcon = option.icon or option.useColorForMarker or option.markerShape %}
	    		<div class="gogo-icon-name-wrapper {{ 'with-icon' if withIcon }}" data-option-id='{{ option.id }}'>

						{# --- ICON ---- #}
						<div class="icon-wrapper" option-id='{{ option.id }}'> {# option-id is used by transiscope theme #}
						{% if option.icon %}
							{{ icon(option.icon, "icon gogo-color-as", option.id) }}
						{% elif option.useColorForMarker or option.markerShape %}
							{% set shape = option.markerShape if option.markerShape else config.marker.defaultShape %}
							{{ markerShape(shape, 'icon gogo-color-as', option.id) }}
						{% endif %}
						</div>

						{# --- NAME ---- #}
						<span class="option-name">
							{{ option.nameShort if option.nameShort else option.name }}
							{# --- ARROW COLAPSIBLE ---- #}
							{% if isSubcategories and not option.unexpandable %}<div class="arrow-after"></div>{% endif %}
							{% if config.menu.displayNumberOfElementForEachCategory %}
								<span class="elements-by-category-count gogo-bg-color-as {{ 'with-checkbox' if displayCheckbox }}" 
								      option-id='{{ option.id }}'>0</span>
							{% endif %}
						</span>

					</div>

					{% if displayCheckbox %}
						{# --- CHECKBOX ---- #}
						<div class="checkbox-wrapper" data-option-id='{{ option.id }}' >
							<div class="checkbox-container">
							  <input type="checkbox" class="subcategorie-option-checkbox {{ 'tooltipped' if isSubcategories }}"
							  id="option-checkbox-{{ option.id }}" {% if isSubcategories %} data-position="right" data-delay="400" data-tooltip="{{ 'check.uncheck.all'|i18n}}"{% endif %}/>
							  <label class="gogo-h-primary" for="option-checkbox-{{ option.id }}"></label>
							</div>
						</div>
					{% endif %}
	    </li>

	    {% if isSubcategories %}
	    	<div class="subcategories-wrapper {{ "" if option.displayInMenu else "no-withdrawal"}}" {% if not option.showExpanded%} style="display:none"{% endif %}>
		    {% for subcategory in option.subcategories %}
		    		{{ renderItem(subcategory, true, displayCheckbox, config) }}
				{% endfor %}
				</div>
			{% endif %}

		 {% endfor %} {# for option in category.options #}
	 </div>

 </div>
{% endmacro %}