{% load variable_types %}

{% if sub_nav_value|is_dict %}
    {% for key, val in sub_nav_value.items %}
        {% if val|is_dict %}
            <div class="mb-3">
                <div class="text-muted ds-fs-11 fw-semibold text-uppercase mb-2">{{ key }}</div>

                {% if key_stack is None %}
                    {% include 'django_spire/metric/report/element/report_sub_navigation_element.html' with depth=True sub_nav_value=val key_stack=key %}
                {% else %}
                    {% include 'django_spire/metric/report/element/report_sub_navigation_element.html' with depth=True sub_nav_value=val key_stack=key_stack|add:'|'|add:key %}
                {% endif %}
            </div>
        {% else %}
            {% with full_key=key_stack|add:'|'|add:key %}
                <a
                    href="?report_key_stack={{ full_key }}"
                    class="d-flex align-items-center gap-2 px-2 py-1 rounded text-decoration-none ds-fs-10 {% if request.GET.report_key_stack == full_key %}bg-app-primary-soft text-app-primary fw-medium{% else %}text-app-default-text-color{% endif %}"
                    data-closes-nav
                >
                    <i class="bi bi-file-earmark-bar-graph {% if request.GET.report_key_stack == full_key %}text-app-primary{% else %}text-muted{% endif %}"></i>
                    {{ key }}
                </a>
            {% endwith %}
        {% endif %}
    {% endfor %}
{% endif %}