{% set displayInline = not category.enableDescription and not category.singleOption %}
{% if displayInline %}
	{% for option in category.options %}
    {% if option.displayChildrenInForm %}
      {% for subcategory in option.subcategories %}
        {% if subcategory.displayInForm %} {% set displayInline = false %} {% endif %}
      {% endfor %}
    {% endif %}
	{% endfor %}
{% endif %}

{% if category.displayInForm %}
  {% set categoryDepth = parentDepth is defined ? parentDepth + 1 : 0 %}
  <div class="category-field {{ displayInline ? 'inline' : ''}} {{ category.isMandatory ? 'mandatory' : '' }}">

  	<span class="category-field-select input-field" data-picking-text='{{ category.pickingOptionText }}'>
      <select id="category-field-{{category.id}}" class="category-select keep-title-option depth-{{ categoryDepth }}"
              data-id="{{category.id}}" name="category-field-{{category.id}}"
              data-single-option="{{category.singleOption}}">
     	  <option disabled selected>Choisissez {{ category.pickingOptionText }} {{ category.isMandatory ? '' : '(optionnel)' }}</option>

        {% for key, option in category.options %}
        	{% if option.displayInForm %}
            <option value="{{option.id}}">
          		{{ option.name }} {% if (option.textHelper is defined and option.textHelper) %} ({{ option.textHelper }}) {% endif %}
          	</option>
          {% endif %}
        {% endfor %}
      </select>
    </span>

  	{% for key, option in category.options %}

  		{% set displayOption = false %}
  		{% set curr_description = '' %}
  		{% set curr_index = 0 %}

  		{% for optionValue in element.optionValues %}
  			{% if optionValue.optionId == option.id %}
  				{% set displayOption = true %}
  				{% set curr_description = optionValue.description %}
  				{% set curr_index = optionValue.index %}
  			{% endif %}
  		{% endfor %}

  		<div class="option-field depth-{{ categoryDepth }} {{ displayInline ? 'inline' : ''}}" id="option-field-{{option.id}}"
            {% if not displayOption %} style="display:none"{% endif %}
  					data-id="{{option.id}}" data-index={{curr_index}}>

  			<div class="option-field-value {{ category.enableDescription ? "with-description" : "" }}">

  				<span class="option-field-name">
						{% set iconClass = (option.icon is defined and option.icon) ?  option.icon : 'icon-angle-right' %}
						{% set iconColorId = '' %}
						{% if iconClass %}
							<span class="icon {{ iconClass }} colorAs depth-{{ categoryDepth }}" option-id='{{ iconColorId }}' ></span>
						{% endif %}
						{{ option.name }}
  				</span>

  				{% if category.enableDescription %}
    				<div class="input-field option-field-description">
  				  	<input placeholder="Précisez si nécessaire" id="option-fields-description-{{ option.id }}" class="option-field-description-input" data-id="{{option.id}}" type="text" length="80" value="{{curr_description}}">
    				</div>
  				{% endif %}

  				<span class="option-field-delete" data-id={{option.id}}><i class="material-icons gogo-icon-clear" data-id={{option.id}}></i></span>
  			</div>

        {% if option.displayChildrenInForm %}
    	  	<div class="subcategories-wrapper ">
    		    {% for subkey, subcategory in option.subcategories %}
    					{% include 'element-form/form-partials/taxonomy-field.html.twig' with {'category': subcategory, 'parentDepth': categoryDepth } %}
    				{% endfor %}
    			</div>
        {% endif %}
  		</div>
  	{% endfor %}
  </div>
{% endif %}