{% set pendingClass = 'pending' if element.displayAsPending() else '' %}
{% set mainIconInMarkerShape = element.markerShape.iconInside|default(true) %}

{% set otherIconsToDisplay = element.iconsToDisplay %}
{% if mainIconInMarkerShape %}
	{% set otherIconsToDisplay = otherIconsToDisplay|remove_first %}
{% endif %}
{% set otherIconsCount = otherIconsToDisplay.length %}
{% set showOtherIcons = otherIconsCount > 0 and not element.displayAsPending() %}

{% set circle = element.markerShape.circle|default(false) %}
{% set iconColorAs = 'gogo-color-as' if circle else 'gogo-bg-color-as' %}

{% from "components/map/marker-shape.html.njk" import markerShape, icon %}

<div class="marker-container" id="marker-{{ element.id }}"
		 style="--size: {{element.markerSize}};--shape-size: {{ element.markerShape.size|default(1) }}"
     data-shape="{{element.markerShape.name}}">

	{# POPUP #}
	{% if config.marker.displayPopup %}
		<div class="marker-popup gogo-bg-color-as {{pendingClass}}"
					style="{{ 'display: block !important;' if config.marker.popupAlwaysVisible else 'display:none'}}"
					option-id="{{element.colorOptionId}}">
			{{ popup|safe }}
		</div>
	{% endif %}

	<div class="marker-wrapper {{pendingClass}} rotate">

		{# MARKER SHADOW #}
		<div class="marker-shadow {{ 'for-url' if markerShape.url else ''}}"></div>

		{# MARKER SHAPE #}
		{{ markerShape(element.markerShape, 'marker-shape gogo-color-as ' ~ pendingClass, element.colorOptionId) }}

		{% if mainIconInMarkerShape %}
			{# MAIN ICON #}
			<div class="main-icon-wrapper {{iconColorAs}}" option-id="{{ element.mainIconColorOptionId }}"
			     {% if element.markerShape.transform %}style="transform: {{element.markerShape.transform}}"{% endif %}>
				{{ icon(element.mainIcon, "marker-icon rotate-reverse " ~ (pendingClass if circle)) }}
			</div>

			{# PLUS ICON #}
			{% if showOtherIcons %}
				<div class="gogo-icon-plus-circle rotate-reverse gogo-color-as" option-id="{{ element.colorOptionId }}"></div>
			{% endif %}

			{# MINI ICON : FAVORITE / STAMPS #}
			{% set displayStamps = element.displayStamps() %}
			<div class="marker-mini-icon-container"
					style="width: {{ 20 * (displayStamps.length + 1) }}px">

				{% if config.isFeatureAvailable('favorite') and element.isFavorite %}
					<span class="marker-mini-icon gogo-icon-star-full rotate-reverse"></span>
				{% endif %}

				{% if config.isFeatureAvailable('stamp') %}
					{% for stamp in displayStamps %}
						<span class="marker-mini-icon {{ stamp.icon }} rotate-reverse"></span>
					{% endfor %}
				{% endif %}
			</div>
		{% endif %}
	</div>

	{# OTHER ICONS #}
	{% if showOtherIcons %}
		<div class="other-icons-wrapper" style="width: {{ otherIconsCount * 50 + 5 }}px">
			{% for optionValue in otherIconsToDisplay %}
				{% set disabledClass = 'disabled' if not optionValue.isFilledByFilters %}
				<div class="other-icon-wrapper {{disabledClass}} {{iconColorAs}} gogo-border-color-as"
						option-id="{{ optionValue.colorOptionId }}">
					{{ icon(optionValue.option.icon, "marker-icon " ~ disabledClass) }}
				</div>
			{% endfor %}
		</div>
	{% endif %}

</div>