{# ThemeWare: Footer-Element "Footer-Navigation" container #}
{# Create footer column with shopware footer navigation #}

{# TODO: prüfen... #}
{# TODO: Kommentare prüfen, ergänzen..., Blöck mit TW? #}
{# TODO: footer-elements zusammenfassen (sh. twt-sidebar-widgets) #}

{% block layout_footer_navigation_columns %}
	{% for root in page.footer.navigation.tree %}
		{% block layout_footer_navigation_column %}
			{# ThemeWare: Set classes #}
			{% set blockClasses = ['footer-column', 'footer-column-footernav'] %}

			{# ThemeWare: Check/add class "last" #}
			{% if last == true %}
				{% set blockClasses = ['last']|merge(blockClasses) %}
			{% endif %}

			{# ThemeWare: Add class element number #}
			{% set blockClasses = ['twt-element-' ~ elementid, 'twt-element-footernav']|merge(blockClasses) %}

			{# ThemeWare: Check/add class custom column #}
			{% if newcol == "2" %}
				{% set blockClasses = ['col-md-12']|merge(blockClasses) %}
			{% elseif newcol == "3" %}
				{% set blockClasses = ['col-md-6']|merge(blockClasses) %}
			{% else %}
				{# ThemeWare: Check/add class column for tablet #}
				{% if columns == columnsTablet %}
					{% set blockClasses = ['col-md-' ~ columns]|merge(blockClasses) %}
				{% else %}
					{% set blockClasses = ['col-xl-' ~ columns, 'col-md-' ~ columnsTablet]|merge(blockClasses) %}
				{% endif %}
			{% endif %}

			{# ThemeWare: Check/add class toggle icon #}
			{% if toggle == "3" %}
				{% set blockClasses = ['js-footer-column']|merge(blockClasses) %}
			{% endif %}

			{# TODO: add block "container" #}
			<div class="{{ blockClasses|join(' ') }}">
				{% block layout_footer_navigation_information_headline %}
					<div class="footer-column-headline footer-headline js-collapse-footer-column-trigger"
						 data-target="#collapseFooterTitle{{ loop.index }}"
						 aria-expanded="true"
						 aria-controls="collapseFooter{{ loop.index }}">

						{% if root.category.type == 'folder' %}
							{{ root.category.translated.name }}
						{% else %}
							<a href="{{ category_url(root.category) }}"
							   {% if category_linknewtab(root.category) %}target="_blank"{% endif %}
							   title="{{ root.category.translated.name }}">
								{{ root.category.translated.name }}
							</a>
						{% endif %}
						{% block layout_footer_navigation_information_icons %}
							{% if toggle == "3" %}
								 <div class="footer-column-toggle">
									  <span class="footer-plus-icon">
											{% sw_icon 'plus' %}
									  </span>
									  <span class="footer-minus-icon">
											{% sw_icon 'minus' %}
									  </span>
								 </div>
							 {% endif %}
						{% endblock %}
					</div>
				{% endblock %}

				{% block layout_footer_navigation_information_content %}
					<div id="collapseFooter{{ loop.index }}"
						 class="footer-column-content {% if toggle == "3" %}collapse {% endif %}js-footer-column-content"
						 aria-labelledby="collapseFooterTitle{{ loop.index }}">
						<div class="footer-column-content-inner">
							{% block layout_footer_navigation_information_links %}
								<ul class="list-unstyled">
									{% for treeItem in root.children %}
										{% set category = treeItem.category %}
										{% set name = category.translated.name %}

										{# @deprecated tag:v6.5.0 - Use "category.translated.externalLink" directly or category_url function instead. #}
										{% set externalLink = category.translated.externalLink %}

										{% block layout_footer_navigation_information_link_item %}
											<li class="footer-link-item">
												{% block layout_footer_navigation_information_link %}
													{% if category.type == 'folder' %}
														<div>{{ name }}</div>
													{% else %}
														<a class="footer-link"
														   href="{{ category_url(category) }}"
														   {% if category_linknewtab(category) %}target="_blank"{% endif %}
														   title="{{ name }}">
															{{ name }}
														</a>
													{% endif %}
												{% endblock %}
											</li>
										{% endblock %}
									{% endfor %}
								</ul>
							{% endblock %}
						</div>
					</div>
				{% endblock %}
			</div>
		{% endblock %}
	{% endfor %}
{% endblock %}