{#-
  Custom tabs override to include search box inside the grid.
  We manually render the tabs list to ensure it's inside the same grid as the search.
-#}
<nav class="md-tabs" data-md-component="tabs">
  <div class="md-grid">
    <ul class="md-tabs__list">
      {% for nav_item in nav %}
        {% set item_url = nav_item.url %}
        {% if not item_url and nav_item.children %}
          {% set item_url = nav_item.children[0].url %}
        {% endif %}

        <li class="md-tabs__item {% if nav_item.active %}md-tabs__item--active{% endif %}">
          <a href="{{ item_url | url }}" class="md-tabs__link {% if nav_item.active %}md-tabs__link--active{% endif %}">
            {{ nav_item.title }}
          </a>
        </li>
      {% endfor %}
    </ul>
    {# Include theme toggle and search box directly in tabs row #}
    <div class="ekgf-tabs-controls">
      {# Include theme toggle directly in tabs row #}
      {% if config.theme.palette %}
        {% include "partials/palette.html" %}
      {% endif %}
      {# Include our custom search box here, inside the grid #}
      {% include "partials/search-box.html" %}
    </div>
  </div>
</nav>