{% block menu %}
    <ul class="op-search-menu list-group list-group-flush">
        {% for div in menu.divs %}
            <li class="list-group-item py-0 op-search-menu-category">
                {% if div.first_category %}
                    <span class="op-menu-first-category">
                {% endif %}
                        <a href="#{{ which }}-submenu-{{ div.table_name }}" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle py-2 op-submenu-category {{ div.collapsed }}" data-cat="{{ div.table_name }}">
                            <span class="title">{{ div.label }}&nbsp;<span class="op-menu-arrow"></span></span>
                        </a>
                {% if div.first_category %}
                        <span class="op-menu-spinner spinner">&nbsp;</span>
                    </span>
                {% endif %}

                <ul class="list-group list-group-flush submenu collapse {{ div.show }}" id="{{ which }}-submenu-{{ div.table_name }}">

                <!-- all div labels have level 2 submenu to list params-->
                {# loop through all params then check if this param belongs to this div.table_name #}
                {% for name, info in menu.data.items %}
                    {% if name == div.table_name %}  {# this param_name IS contained in this div #}
                        {% if info.menu_help %}
                            <li class="list-group-item list-group-item-action py-0 ps-0 bg-white"><div class="menu_help text-info">{{ info.menu_help }}</div></li>
                        {% endif %}

                        {% if info.has_sub_heading %}
                            {#  this div has sub_headings, level-3 menu sections... start sub_heading loop  #}
                            {% for sub_head,params in info.data.items %}
                                <li class="list-group-item py-0 ps-0">
                                    <a href="#{{ which }}-submenu-{{ div.table_name|slugify }}-{{ sub_head.0|slugify }}" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle op-submenu-category {{ sub_head.1 }}" data-cat="{{ div.table_name|slugify }}-{{ sub_head.0|slugify }}">
                                        <span class="menu-text title">{{ sub_head.0 }}&nbsp;<span class="op-menu-arrow"></span></span>
                                    </a>
                                    <ul class="list-group list-group-flush submenu collapse {{ sub_head.2 }}" id="{{ which }}-submenu-{{ div.table_name|slugify }}-{{ sub_head.0|slugify }}">
                                        {% for p in params %}
                                            {% if p.cat_name == sub_head.0.slugify %}
                                                <li class="list-group-item py-0 ps-0">
                                                    <a data-label="
                                                        {% if menu.data.labels_view == 'selector' %}
                                                            {{ p.label_results }}
                                                        {% else %}
                                                            {{ p.label }}
                                                        {% endif %}
                                                        " data-qualifiedlabel="
                                                        {% if menu.data.labels_view == 'selector' %}
                                                            {{ p.body_qualified_label_results }}
                                                        {% else %}
                                                            {{ p.body_qualified_label }}
                                                        {% endif %}
                                                      "
                                                      data-dispunit="{% if p.disp_unit %}{{ p.disp_unit }}{% endif %}"
                                                      data-defaultunit="{% if p.default_unit %}{{ p.default_unit }}{% endif %}"
                                                      data-availunits="{% if p.units %}{{ p.units }}{% endif %}"
                                                      data-slug="{{ p.slug }}" class="op-search-param" href="#">
                                                        <span class="op-menu-item">
                                                            <span class="op-search-param-checkmark">
                                                                <i class="fa fa-check"></i>
                                                            </span>
                                                            {% if menu.data.labels_view == 'selector' %}
                                                                {% if p.get_tooltip_results %}
                                                                    <i class="fas fa-info-circle op-menu-tooltip" title="{{ p.get_tooltip_results }}"></i>
                                                                {% endif %}
                                                                <span>{{ p.label_results }}</span>
                                                            {% else %}
                                                                {% if p.get_tooltip %}
                                                                    <i class="fas fa-info-circle op-menu-tooltip" title="{{ p.get_tooltip }}"></i>
                                                                {% endif %}
                                                                <span>{{ p.label }}</span>
                                                            {% endif %}
                                                            {% if p.referred_slug %}
                                                                <i class="fas fa-link op-referred-link op-menu-tooltip" title="{{ p.get_link_tooltip }}"></i>
                                                            {% endif %}
                                                        </span>
                                                    </a>
                                                </li>
                                            {% endif %}
                                        {% endfor %} {# p in params #}
                                    </ul>
                                </li>
                            {% endfor %} {# for sub_head, params in info.data.items #}

                        {% else %}

                            {# this div does not have sub_headings, list the params #}
                            {% for p in info.data %}
                                <li class="list-group-item py-0 ps-0">
                                    <a data-label="
                                        {% if menu.data.labels_view == 'selector' %}
                                            {{ p.label_results }}
                                        {% else %}
                                            {{ p.label }}
                                        {% endif %}
                                      " data-qualifiedlabel="
                                        {% if menu.data.labels_view == 'selector' %}
                                            {{ p.body_qualified_label_results }}
                                        {% else %}
                                            {{ p.body_qualified_label }}
                                        {% endif %}
                                      "
                                      data-dispunit="{% if p.disp_unit %}{{ p.disp_unit }}{% endif %}"
                                      data-defaultunit="{% if p.default_unit %}{{ p.default_unit }}{% endif %}"
                                      data-availunits="{% if p.units %}{{ p.units }}{% endif %}"
                                      data-slug="{{ p.slug }}" class="op-search-param" href="#">
                                        <span class="op-menu-item">
                                            <span class="op-search-param-checkmark">
                                                <i class="fa fa-check"></i>
                                            </span>
                                            {% if menu.data.labels_view == 'selector' %}
                                                {% if p.get_tooltip_results %}
                                                    <i class="fas fa-info-circle op-menu-tooltip" title="{{ p.get_tooltip_results }}"></i>
                                                {% endif %}
                                                {% if div.table_name == 'search_fields' %}
                                                    <span>{{ p.body_qualified_label_results }}</span>
                                                {% else %}
                                                    <span>{{ p.label_results }}</span>
                                                {% endif %}
                                            {% else %}
                                                {% if p.get_tooltip %}
                                                    <i class="fas fa-info-circle op-menu-tooltip" title="{{ p.get_tooltip }}"></i>
                                                {% endif %}
                                                <span>{{ p.label }}</span>
                                            {% endif %}
                                            {% if p.referred_slug %}
                                                <i class="fas fa-link op-referred-link op-menu-tooltip" title="{{ p.get_link_tooltip }}"></i>
                                            {% endif %}
                                        </span>
                                    </a>
                                </li>
                            {% endfor %}
                        {% endif %}
                    {% endif %} {# name == div.table_name #}
                {% endfor %} {# for name, info in menu.data.items #}
            </ul>
        </li>
        {% endfor %} {# for div in menu.divs #}
    </ul>
{% endblock %}