{% load i18n ocyan_thumbnail %}

{% if menu_items %}
    {% for menu_item in menu_items %}

        {% with category_icon=menu_item.category.icons.first %}        
        {% if menu_item.depth == 1 %}
            {% if menu_item.has_children %}
                <li>
                    <a class="nav-link" href="{{ menu_item.get_absolute_url }}" tabindex="-1">
                        {% if category_icon.fa %}
                            <i class="{{category_icon.fa }}"></i>
                        {% else %}
                            {% picture category_icon.icon.file "x300" %}
                        {% endif %}
                        
                        {{ menu_item.name }}
                    </a>
                    <div class="mega-menu">
                {% else %}
                <li class="nav-item">
                    <a class="nav-link dropdown" tabindex="-1" href="{{ menu_item.get_absolute_url }}">
                        {% if category_icon.fa %}
                            <i class="{{category_icon.fa }}"></i>
                        {% else %}
                            {% picture category_icon.icon.file "x300" %}
                        {% endif %}

                        {{ menu_item.name }}
                    </a>
                </li>
            {% endif %}
        {% elif menu_item.depth == 2 %}
            <a class="nav-link col-xs-12 mege-menu-item" tabindex="-1" href="{{ menu_item.get_absolute_url }}">
                {% if category_icon.fa %}
                    <i class="{{category_icon.fa }}"></i>
                {% else %}
                    {% picture category_icon.icon.file "x300" %}
                {% endif %}

                {{ menu_item.name }}
            </a>
        {% endif %}

        {% for close in menu_item.num_to_close %}
        {% if menu_item.depth == 1 %}
           </div>
        </li>
        {% endif %}
        {% endfor %}

        {% endwith %}
    {% endfor %}
{% endif %}