<div id="directory-menu-main-container">
	{% if config.images.menuTopImage %}
		<div class="top-image-container">
			<img src="{{ config.images.menuTopImage }}" class="menu-top-image" />
		</div>
	{% endif %}
  <div class="directory-menu-header gogo-section-searchbar">

		{% include 'components/search-bar/search-bar.html.njk' %}

		<div class="btn-close-menu large-screen tooltipped" data-tooltip="{{ 'close.menu' | i18n }}" data-position="right" data-delay="300"><span class="gogo-color-link arrow-left">◀</span></div>

		<div class="shadow-bottom"></div>
	</div>

	<div class="directory-menu-content gogo-section-content">

	  {% import 'components/spinner-loader.html.njk' as spinnerLoader %}
	  {{ spinnerLoader.create('directory-menu-spinner-loader') }}

	  <div class="filter-menu">

			{# MAIN CATEGORIE SIDE BAR (if needed) #}
			{% if config.menu.showOnePanePerMainOption %}
				<div class="main-categories gogo-section-content-opposite custom-scroll-bar-light" {{  '' if fullTaxonomy else 'style="display:none"' }}>

					<div class="icon main-gogo-icon-background gogo-bg-neutral" id="active-main-option-background"></div>

					<div class="icon main-icon active" id="main-option-gogo-icon-all" data-option-id="all">
						<div class="main-icon-text">{{ 'all' | i18n }}</div>
						<div class="main-option-tooltip gogo-bg-neutral-dark">{{ 'all.the' | i18n }} {{ 'element.plural' | i18n }}</div>
					</div>

					{# MAIN OPTIONS ICONS & TOOLTIP #}
					{% for mainOption in mainCategory.options %}
						<div class="icon main-icon {{ mainOption.icon }} gogo-color-link"  id="main-option-gogo-icon-{{mainOption.id}}" data-option-id="{{ mainOption.id }}">
							<div class="main-option-tooltip">{{ mainOption.name }}</div>
						</div>
					{% endfor %}

				</div>
			{% endif %}

			<div class="sub-categories gogo-section-background {{ "one-pane-per-main-option" if config.menu.showOnePanePerMainOption else "single-pane" }}">

				{% if config.menu.showOnePanePerMainOption %}
					<div class="sub-categorie-main-title" id="menu-subcategories-title"></div>
				{% endif %}

				<div class="sub-categories-content gogo-section-content no-top-divider {{ "" if config.menu.showOnePanePerMainOption else "full-height" }}">
					<ul class="custom-scroll-bar">

						{# ALL FILTERS INCLUDING TAXONOMY #}
						{% for filter in config.menu.filters %}
							{% if filter.type in ["date", "number", "area", "value"] %}
								{# Filter Label and Clear button #}
								<li class="subcategory-item filter {{ '' if filter.contracted else 'expanded'}}">
	  							<div class="name-wrapper">
								    <span class="name">{{ filter.label|safe }}</span>
								    <div class="arrow-after"></div>
								  </div>
								  <div class="btn-clear-filter tooltipped gogo-section-content-opposite" data-position="right" data-tooltip="{{ 'clear.filter' | i18n }}" data-id={{ filter.id }}>
								    {#<span class="label">{{ 'clear'|i18n }}</span>#}
								    <span class="gogo-icon-close"></span>
								  </div>
								</li>
								{# Filter content wrapper #}
								<div class="filter-wrapper gogo-{{ filter.type }}-filter" data-id="{{ filter.id }}"
								     style="{{ 'display: none' if filter.contracted else '' }}">
							{% endif %}

					  		{% include 'components/directory-menu/filter-' ~ filter.type ~ '.html.njk' ignore missing %}

							{% if filter.type in ["date", "number", "area", "value"] %}
								</div>
							{% endif %}
					  	{% endfor %}

					  	{% include 'components/directory-menu/show-only-favorite-pending-moderation.html.njk' %}
							{% if config.map.optionnalGeojsonLayers|length > 0 %}
								{% include 'components/directory-menu/toggle-geojson-layers.html.njk' %}
							{% endif %}

					</ul>
				</div>

			</div>
		</div>

	</div>

</div>