{% macro renderMainMenu(context, item) %}
  {% set journal3 = context.journal3 %}
  {% set display = context.display %}
  {% set cid = journal3.uniqueId('collapse-') %}
  {% set image_width = context.image_width %}
  {% set image_height = context.image_height %}
  <li class="{{ journal3.classes(item.classes) }}">
    {% if item.items %}
      {% if item.link.href %}
        <a href="{{ item.link.href }}" {{ journal3.linkAttrs(item.link) }} {% if display == 'dropdown' %} class="dropdown-toggle" data-toggle="dropdown" {% else %} class="collapse-toggle"{% endif %}>
          {% if item.thumb %}
            <span class="menu-image">
                <img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}" loading="lazy"/>
            </span>
          {% endif %}
          {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
          <span class="open-menu collapsed" data-toggle="collapse" data-target="#{{ cid }}"><em class="fa fa-plus"></em></span>
        </a>
      {% else %}
        <a href="javascript:;" {% if display == 'dropdown' %} class="dropdown-toggle" data-toggle="dropdown" {% else %} class="collapse-toggle"{% endif %}>
          {% if item.thumb %}
            <span class="menu-image">
               <img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}" loading="lazy"/>
            </span>
          {% endif %}
          {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
          <span class="open-menu collapsed" data-toggle="collapse" data-target="#{{ cid }}"><em class="fa fa-plus"></em></span>
        </a>
      {% endif %}
     <div class="{{ display == 'dropdown' ? 'dropdown-menu j-dropdown': 'collapse' }}" id="{{ cid }}">
       <ul class="j-menu">
         {% for subitem in item.items %}
           {{ _self.renderMainMenu(_context, subitem) }}
         {% endfor %}
       </ul>
     </div>
    {% else %}
      {% if item.link.href %}
        <a href="{{ item.link.href }}" {{ journal3.linkAttrs(item.link) }}>
          {% if item.thumb %}
            <span class="menu-image">
               <img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}" loading="lazy"/>
            </span>
          {% endif %}
          {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
        </a>
      {% else %}
        <a href="javascript:;">
          {% if item.thumb %}
            <span class="menu-image">
              <img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}" loading="lazy"/>
            </span>
          {% endif %}
          {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
        </a>
      {% endif %}
    {% endif %}
  </li>
{% endmacro %}
{% if items %}
  <div id="{{ id }}" class="{{ journal3.classes(classes) }}">
  <button aria-label="Edit" class="admin-edit" type="button" data-edit="{{ edit }}"><em class="fa fa-pencil" data-placement="auto" data-toggle="tooltip-hover" data-tooltip-class="admin-edit-tooltip" title="Edit {{ name }}"></em></button>
    <ul class="j-menu">{% for item in items %}
      {% set cid = journal3.uniqueId('collapse-') %}
      <li class="{{ journal3.classes(item.classes) }}" data-open-color-scheme="{{ item.dropdown_color_scheme ?: dropdown_color_scheme }}">
        {% if item.items %}
          {% if item.link.href %}
            <a href="{{ item.link.href }}" {{ journal3.linkAttrs(item.link) }} {% if display == 'dropdown' %} class="dropdown-toggle" data-toggle="dropdown" {% else %} class="collapse-toggle"{% endif %}>
              {% if item.thumb %}
                <span class="menu-image">
                  <img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}" loading="lazy"/>
                </span>
              {% endif %}
              {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
              <span class="open-menu collapsed" data-toggle="collapse" data-target="#{{ cid }}" {% if item.isOpen %}aria-expanded="true"{% endif %}><em class="fa fa-plus"></em></span>
              {% if item.label %}
                <span class="menu-label">{{ item.label }}</span>
              {% endif %}
            </a>
          {% else %}
            <a href="javascript:;" {% if display == 'dropdown' %} class="dropdown-toggle" data-toggle="dropdown" {% else %} class="collapse-toggle"{% endif %}>
              {% if item.thumb %}
                <span class="menu-image">
                  <img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}" loading="lazy"/>
                </span>
              {% endif %}
              {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
              <span class="open-menu collapsed" data-toggle="collapse" data-target="#{{ cid }}" {% if item.isOpen %}aria-expanded="true"{% endif %}><em class="fa fa-plus"></em></span>
              {% if item.label %}
                <span class="menu-label">{{ item.label }}</span>
              {% endif %}
            </a>
          {% endif %}
          {% if item.type == 'multilevel' %}
            <div class="{{ display == 'dropdown' ? 'dropdown-menu j-dropdown': 'collapse' }} {% if item.isOpen %}in{% endif %} {{ item.dropdown_color_scheme ?: dropdown_color_scheme }}" id="{{ cid }}">
              {{ not item.isOpen ? '<template>' :'' }}
              <ul class="j-menu">
                {% for subitem in item.items %}
                  {{ _self.renderMainMenu(_context, subitem) }}
                {% endfor %}
              </ul>
              {{ not item.isOpen ? '</template>' :'' }}
            </div>
          {% endif %}
          {% if item.type == 'megamenu' %}
            <div class="{{ display == 'dropdown' ? 'dropdown-menu j-dropdown': 'collapse' }} {% if item.isOpen %}in{% endif %} {{ item.dropdown_color_scheme ?: dropdown_color_scheme }}" id="{{ cid }}">
              {{ not item.isOpen ? '<template>' :'' }}
              <div class="mega-menu-content">{{ item.items }}</div>
              {{ not item.isOpen ? '</template>' :'' }}
            </div>
          {% endif %}
          {% if item.type == 'flyout' %}
            <div class="{{ display == 'dropdown' ? 'dropdown-menu j-dropdown': 'collapse' }} {% if item.isOpen %}in{% endif %} {{ item.dropdown_color_scheme ?: dropdown_color_scheme }}" id="{{ cid }}">
              {{ item.items }}
            </div>
          {% endif %}
        {% else %}
          {% if item.link.href %}
            <a href="{{ item.link.href }}" {{ journal3.linkAttrs(item.link) }}>
              {% if item.thumb %}
                <span class="menu-image">
                   <img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}" loading="lazy"/>
                </span>
              {% endif %}
              {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
              {% if item.label %}
                <span class="menu-label">{{ item.label }}</span>
              {% endif %}
            </a>
          {% else %}
            <a href="javascript:;" title="{{ item.title }}">
              {% if item.thumb %}
                <span class="menu-image">
                  <img src="{{ item.thumb }}" {% if item.thumb2x %}srcset="{{ item.thumb }} 1x, {{ item.thumb2x }} 2x" {% endif %} alt="{{ item.title }}" width="{{ image_width }}" height="{{ image_height }}" loading="lazy"/>
                </span>
              {% endif %}
              {{ journal3.countBadge(item.title, item.link.total, item.link.classes) }}
              {% if item.label %}
                <span class="menu-label">{{ item.label }}</span>
              {% endif %}
            </a>
          {% endif %}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  </div>
{% endif %}
