{% load i18n ocyan_thumbnail %}
{% if menu_items %}
{% for menu_item in menu_items %}
{% if forloop.first %}
	<li class="dropdown-header">{% trans "Categories" %}</li>
{% endif %}
{% with category_icon=menu_item.category.icons.first %}
{% if menu_item.has_children %}
<li class="nav-item {% if forloop.first %}hover{% endif %} {% if menu_item.has_children %}has-children{% endif %} {% if menu_item.depth == 1 %}head{% else %}child{% endif %} dropdown pages-dropdown">
    <a class="nav-link" href="{{ menu_item.get_absolute_url }}">
        {% if menu_item.image %}{% lazy_picture menu_item.image "100x100" selector="icon-dropdown-lazy" alt=menu_item.name %}{% endif %} <div class="menu-item-name">{{ menu_item.name }}</div>
    </a>
    <ul class="dropdown-menu icon-inner-menu">
	<li class="dropdown-header layer-{{ menu_item.depth }}"><i class="fa fa-chevron-left me-3 small d-lg-none"></i><div class="menu-item-name"><a href="{{ menu_item.get_absolute_url }}" class="dropdown-inner-header">{{ menu_item.name }}</a></div></li>
{% else %}
<li class="nav-item child">
    <a class="nav-link" href="{{ menu_item.get_absolute_url }}">
        {% if menu_item.image %}{% lazy_picture menu_item.image "100x100" selector="icon-dropdown-lazy" alt=menu_item.name %}{% endif %} <div class="menu-item-name">{{ menu_item.name }}</div>
    </a>
</li>
{% endif %}
{% for close in menu_item.num_to_close %}
   </ul>
</li>
{% endfor %}
{% endwith %}
{% endfor %}
<span class="icon_dropdown_devider"></span>
{% endif %}