{% from "components/map/marker-shape.html.njk" import markerShape, icon %}
{% macro renderCategoryValue(categoryValue) %}

{% set activeChildrenCount = 0 %}
{% for optionValue in categoryValue.children %}
	{% if optionValue.option.displayInInfoBar %}
		{% set activeChildrenCount = activeChildrenCount + 1 %}
	{% endif %}
{% endfor %}	

{% set wrapOptionsIntoCategoryContainer = activeChildrenCount > 0 %}

{% if wrapOptionsIntoCategoryContainer %}
	<div class="category-wrapper">	
{% endif %}

{% if categoryValue.category.displayInInfoBar %}
	<h3 class="category-name">{{ categoryValue.category.name }}</h3>
{% endif %}

{% if categoryValue.category.displaySuboptionsInline %}<div class="row">{% endif %}
{% for optionValue in categoryValue.children %}
	{% set option = optionValue.option %}
	{% if option.displayInInfoBar and not option.isHidden %}
	  {% if categoryValue.category.displaySuboptionsInline %}
	  	{% set optionClass = 'inline' %}
	  {% elseif option.enableDescription or categoryValue.category.enableDescription %}
	  	{% set optionClass = 's6 m5' %}
	  {% else %}
	  	{% set optionClass = 's12' %}
	  {% endif %}
	  {% if not categoryValue.category.displaySuboptionsInline %}<div class="row">{% endif %}

		{# Option Icon and Name #}
		{% if option.url %}<a class="option-url" href="{{ option.url }}" target="_blank">{% endif %}
		<span class="option-value col gogo-color-as {{ optionClass }} {{ 'last' if loop.last else ''}} {{ 'first' if loop.first else ''}}"
					option-id={{ option.id }}>
			{% 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 %}
			<span class="option-name {{ optionValue.diff }}" option-id={{ option.id }}>{{ option.name }}</span>
			{% if option.url %}<span class="icon gogo-icon-external-link"></span>{% endif %}
		</span>
		{% if option.url %}</a>{% endif %}

		{# Option Description #}
		{% if (option.enableDescription or categoryValue.category.enableDescription) and not categoryValue.category.displaySuboptionsInline %}
			<span class="col s6 m7 option-description"><span class="{{ optionValue.diff }}">{{ optionValue.description|safe }}</span></span>
		{% endif %}
	  
		{% if not categoryValue.category.displaySuboptionsInline %}</div>{% endif %}
  {% endif %}

  {# Render children #}
  {% if optionValue.option.displayChildrenInInfoBar and not option.isHidden %}
		{% for subcategory in optionValue.children %}
			{{ renderCategoryValue(subcategory) }}
		{% endfor %} 
	{% endif %}
	
{% endfor %} 
{% if categoryValue.category.displaySuboptionsInline %}</div>{% endif %}

{% if wrapOptionsIntoCategoryContainer %}	
	</div> <!-- div end for category-wrapper -->
{% endif %}

{% endmacro %}