<div id="NavSideBar">

<ul class="nav top-level-nav flex-column accordion" id="ShieldCollapseNav">

	{% for mitem in vars.navbar_menu %}

		<li class="nav-item {{ mitem.active|default(false) ? 'active':'' }}
					{% if mitem.sub_items|default([]) is not empty %} with-submenu{% endif %}"
			{% if mitem.id|default('') is not empty %}id="{{ mitem.id }}"{% endif %}
		>
				<span class="nav-link fs-6 mt-0 pt-2 pb-3 ps-2 pe-1 {{ mitem.classes|default([])|join( ' ' ) }} text-start {{ mitem.active|default(false) ? 'show':'' }}
						d-flex justify-content-start"
						{% if mitem.sub_items|default([]) is not empty %}
							data-bs-toggle="collapse" data-bs-target="#subnav-{{ mitem.slug }}"
						{% endif %}
						{% for data_key,data_val in mitem.data|default([]) %}
							data-{{ data_key }}="{{ data_val }}"
						{% endfor %}
						{% if mitem.introjs|default([]) is not empty %}
							{% if mitem.introjs.title|default('') is not empty %}
								data-introtitle="{{ mitem.introjs.title }}"
							{% endif %}
							data-intro="{{ mitem.introjs.body }}"
							data-introposition="right"
						{% endif %}
				>
					<a href="{{ mitem.sub_items|default([]) is empty ? mitem.href|default('javascript:{}') : 'javascript:{}' }}"
					   class="d-flex justify-content-start"
					   {% if sub.target|default('') is not empty %}target="{{ sub.target }}"{% endif %}
					>

						{% if mitem.img|default('') is not empty %}
							<span class="nav-icon me-2 d-flex flex-column justify-content-center"
								  style="vertical-align: text-bottom;">
								{{ mitem.img|raw }}
							</span>
						{% endif %}

						<span class="top-title d-flex flex-column">
							<span class="title">
								{{ mitem.title }}
								{% if mitem.sub_items|default([]) is not empty %}
									{{ imgs.svgs.triangle|raw }}
								{% endif %}
							</span>
							<span class="subtitle p-0" style="font-size: 0.7rem">
								{{ mitem.subtitle|default('') }}
							</span>
						</span>

						{% if mitem.badge|default([]) is not empty %}
							<span class="badge bg-{{ mitem.badge.type|default('info') }}">
								{{ mitem.badge.text }}
							</span>
						{% endif %}

					</a>

					{% if mitem.config|default([]) is not empty %}
						<a class="flex-fill d-flex flex-row justify-content-end align-self-center me-1 z-3 fs-6 {{ mitem.config.classes|default([])|join( ' ' ) }}"
						   href="{{ mitem.config.href|default('#') }}"
						   {% if mitem.config.tooltip|default(false) is not empty %}title="{{ mitem.config.tooltip }}"{% endif %}
								{% for data_key,data_val in mitem.config.data|default([]) %}
									data-{{ data_key }}="{{ data_val }}"
								{% endfor %}
								{% if mitem.config.tooltip|default(false) is not empty %}
									data-bs-toggle="tooltip"
									data-bs-placement="right"
									data-bs-title="{{ mitem.config.tooltip }}"
								{% endif %}
						><span class="svg-container">{{ mitem.config.img|raw }}</span></a>
					{% endif %}
				</span>

			{% if mitem.sub_items|default([]) is not empty %}
				<div class="ms-3 subnav-menu accordion-collapse {{ mitem.active|default(false) ? 'show':'collapse' }}"
					 id="subnav-{{ mitem.slug }}"
					 data-bs-parent="#ShieldCollapseNav"
				>
					<ul class="nav flex-column pt-0 primary_side_sub_menu px-0 py-2">
						{% for sub_item in mitem.sub_items %}
							<li class="mb-0 pl-0 py-0">

								<span class="nav-link d-flex justify-content-between py-1 pe-1 ps-0 {{ sub_item.active ? 'active':'' }} ">

									<a class="flex-fill fs-6 {{ sub_item.classes|default([])|join( ' ' ) }}"
									   href="{{ sub_item.href|default('#') }}"
									   {% if sub_item.tooltip|default(false) is not empty %}title="{{ sub_item.tooltip }}"{% endif %}
											{% for data_key,data_val in sub_item.data|default([]) %}
												data-{{ data_key }}="{{ data_val }}"
											{% endfor %}
											{% if sub_item.target|default('') is not empty %}target="{{ sub_item.target }}"{% endif %}
									>
										{{ sub_item.title }}
									</a>

									{% if sub_item.config|default(null) is not empty %}
										<a class="zone_config text-end fs-6 {{ sub_item.config.classes|default([])|join( ' ' ) }}"
										   href="{{ sub_item.config.href|default('#') }}"
										   {% if sub_item.config.tooltip|default(false) is not empty %}title="{{ sub_item.config.tooltip }}"{% endif %}
												{% for data_key,data_val in sub_item.config.data|default([]) %}
													data-{{ data_key }}="{{ data_val }}"
												{% endfor %}
												{% if sub_item.config.tooltip|default(false) is not empty %}
													data-bs-toggle="tooltip"
													data-bs-placement="right"
													data-bs-title="{{ sub_item.config.tooltip }}"
												{% endif %}
										><span class="svg-container">{{ sub_item.config.icon|raw }}</span></a>
									{% endif %}

								</span>

							</li>
						{% endfor %}
					</ul>
				</div>
			{% endif %}
		</li>

	{% endfor %}
</ul>
</div>

{% if not flags.is_whitelabelled %}
	<div class="mt-2 text-center border-bottom mx-auto" style="color: #008000;">
		{{ strings.running_version|raw }}
	</div>
{% endif %}