{% import _self as header %}

{% if nodemenu is defined %}
    <header class="main-header clearfix">
        <h1 id="logo">
            {% set homepagePageNode = nodemenu.getRootNodeMenuItem() %}
            {% set slug = homepagePageNode ? homepagePageNode.slug : '' %}
            <a href="{{ path('_slug', { 'url': slug }) }}"><img src="{{ '/images/ed_logo.png'|imagine_filter('logo') }}" alt="Embracing Differences"></a>
            <a href="http://www.reginamulticulturalcouncil.ca" target="_blank"><img src="{{ '/images/rmc_header_logo.png'|imagine_filter('logo') }}" alt="A Project of the Regina Multicultural Council"></a>
        </h1>
        {% set activeSubnode = nodemenu.getActiveForDepth(1) %}
        <div>
            <div class="socialmedia-links">
                <a href="http://www.facebook.com" target="_blank" title="Facebook"><i class="fab fa-facebook-square fa-2x"></i></a>
            </div>
            {% if activeSubnode and activeSubnode.children %}
            <button type="button" class="navbar-toggler collapsed" data-toggle="collapse"
                    data-target="#nav_{{ activeSubnode.id }}">
                <i class="fal fa-bars fa-2x"></i><span class="sr-only">Menu</span>
            </button>
            {% endif %}
        </div>
        {% if activeSubnode and activeSubnode.children %}
            <nav class="navbar">
                {{ header.nav(activeSubnode, nodemenu, false) }}
            </nav>
        {% endif %}
    </header>
{% endif %}

{% macro nav(activeSubnode, nodemenu, isSub) %}
    <div class="collapse {% if isSub and activeSubnode.active %}show{% endif %} navbar-collapse"
         id="nav_{{ activeSubnode.id }}">
        <ul class="navbar-nav">
            {% for node in activeSubnode.children %}
                {% if not node.node.isHiddenFromNav() %}
                    <li class="nav-item {% if(node.active) %}active{% endif %} {% if nodemenu.lastActive(node.slug) %}lastactive{% endif %}">
                        <a href="{{ path('_slug', { 'url': node.slug }) }}"
                           class="nav-link {% if(node.active) %}active{% endif %} {% if nodemenu.lastActive(node.slug) %}lastactive{% endif %}">
                            {{ node.title }}
                        </a>
                        {% if node.children %}
                            <button type="button" class="navbar-toggler {% if not node.active %}collapsed{% endif %}"
                                    data-toggle="collapse" aria-expanded="{{ node.active? 'true' : 'false' }}"
                                    data-target="#nav_{{ node.id }}">
                                <i class="fas fa-chevron-down"></i><i class="fas fa-chevron-up"></i></i><span class="sr-only">Toggle sub-menu</span>
                            </button>
                            {{ header.nav(node, nodemenu, true) }}
                        {% endif %}
                    </li>
                {% endif %}
            {% endfor %}
        </ul>
    </div>
{% endmacro %}