{% if site.data.nav.universal-nav %}
    {% include universal-nav.html %}
{% endif %}
<nav class="
{% if layout.nav-light %}
        nav-light 
{% elsif page.nav-light %}
        nav-light 
{% endif %}
navbar-inverse navbar-fixed-top" id="main-navigation">
        <!-- NAVBAR HEADER-->
         <div class="navbar-header">
             <button for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
           </button>
            {% if site.data.nav.brand %}
                <a class="navbar-brand " href="{{site.data.nav.brand.url}}">
                    {% if site.data.nav.brand.image.enabled %}
                        {% if site.data.nav.brand.image.svg %}
                            {% include {{site.data.nav.brand.image.name}} %}
                        {% elsif site.data.nav.brand.image.name %}
                             <img src="{% asset_path '{{ site.data.nav.brand.image.name }}'  %}" alt="{% if site.data.settings.name %}{{ site.data.settings.name }}{% else %}Linaro Site{% endif %} Logo." id="brand-image" />
                        {% else %}
                            {% include linaro-svg.html %}
                        {% endif %}
                    {% else %}
                        {{site.title}}
                    {% endif %}
                </a>
            {% endif %}
          </div>

         <!-- NAVBAR COLLAPSE-->
          <div class="collapse navbar-collapse" id="navbar-collapse">
              <ul class="nav navbar-nav navbar-right" id="navbar-buttons">
                {% for section in site.data.nav.pages %}
                    {% if section.options %}
                        <li class="main dropdown menu
                            {% for menu-item in section.options %}
                                 {% if page.url == menu-item.url %}
                                    active
                                 {% endif %}
                            {% endfor %}">
                          <a href="{% if section.url %}{{section.url}}{% endif %}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                              {{section.title}} <span class="caret"></span>
                          </a>
                          <ul class="dropdown-menu menu">
                              {% for menu_option in section.options %}
                                  {% if menu_option.options %}
                                  <li class="dropdown-submenu sub-menu">
                                    <a tabindex="-1" href="{% if menu_option.url %}{{menu_option.url}}{% endif %}" class="m\obile-link-inactive">{{menu_option.text}}</a>
                                    <ul class="dropdown-menu sub-menu">
                                    {% for sub-option in menu_option.options %}
                                        {% if sub-option.options %}
                                        <li class="dropdown-submenu">
                                          <a href="{% if sub-option.url %}{{sub-option.url}}{% endif %}">{{sub-option.text}}</a>
                                          <ul class="dropdown-menu">
                                          {% for sub-sub-option in sub-option.options %}
                                              <li><a href="{{sub-sub-option.url}}">{{sub-sub-option.text}}</a></li>
                                           {% endfor %}
                                          </ul>
                                        </li>
                                        {% else %}
                                        <li><a href="{{sub-option.url}}">{{sub-option.text}}</a></li>
                                        {% endif %}
                                    {% endfor %}
                                      </ul>
                                    </li>
                                  {% else %}
                                      <li>
                                          <a target="_self" href="{{menu_option.url}}" class="dropdown-item " title="{{menu_option.txt}}">{{menu_option.text}} {% if menu_option.external %}<i class="glyphicon glyphicon-new-window pull-right"></i>{% endif %}</a>
                                      </li>
                                  {% endif %}
                              {% endfor %}
                          </ul>
                        </li>
                    {% else %}
                        <li {% if section.url == page.permalink %}
                                class="main active"
                            {% else %}
                                class="main"
                            {% endif %}
                            ><a href="{{section.url}}" title="{{section.title}}">{{section.title}}</a></li>
                    {% endif %}
                {% endfor %}
                
                {% if site.data.nav.search.enabled %}
                    <li id="search-menu-item">
                        <a href="#search" class="dropdown-toggle" id="search_icon">
                             <i class="glyphicon glyphicon-search"></i>
                        </a>
                    </li>
                {% endif %}
        
            </ul>
            
            
            {% if site.data.nav.search.enabled %}
                <div id="search_bar">
                    
                    <form class="form-inline" action="/search/" method="GET" target="_self" id="search_form">
                        <div class="input-group">
                          <input type="text" name="q" class="form-control" placeholder="Search...">
                           <span class="input-group-btn">
                               <!--Reset-->
                               <button type="reset" class="btn btn-default" id="search_close">
                                   <span class="glyphicon glyphicon-remove">
                                       <span class="sr-only">Close</span>
                                   </span>
                               </button>
                           </span>
                           <span class="input-group-btn">
                               <!--Search-->
                               <button type="submit" class="btn btn-default" id="search_search">
                                   <span class="glyphicon glyphicon-search">
                                       <span class="sr-only">Close</span>
                                   </span>
                               </button>
                           </span>
                           <input type="hidden" name="fields.label" value="{{ site.data.settings.search-label }}">
                        </div>
                    </form>
                    
                </div>
            {% endif %}
            
  </div>
</nav>