{% if header %}
<header class="usa-header usa-header-extended" role="banner">

  <div class="usa-navbar">
    <button class="usa-menu-btn">Menu</button>
    <div class="usa-logo" id="logo">
      <em class="usa-logo-text">
        <a href="{% if header.href %}{{ header.href }}{% else %}{{ site.baseurl }}/{% endif %}" title="Home">
          {{ header.title | default: site.title }}
        </a>
      </em>
    </div>
  </div>

  <nav role="navigation" class="usa-nav">
    <div class="usa-nav-inner">
      <button class="usa-nav-close">
        <img src="{{ site.baseurl }}/assets/uswds/img/close.svg" alt="close">
      </button>

      {% assign _primary = header.primary.links %}
      {% assign primary_links = site.data.navigation[_primary] | default: _primary %}
      {% if primary_links %}
      <ul class="usa-nav-primary usa-accordion">
        {% for _section in primary_links %}
        <li>
          {% if _section.links %}
            {% assign section_links = site.data.navigation[_section.links] | default: _section.links %}
            {% assign _section_id = _section.id %}
            {% unless _section_id %}{% assign _section_id = 'nav-' | append: forloop.index %}{% endunless %}
          <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="{{ _section_id }}">
            <span>{{ _section.text }}</span>
          </button>
          <ul id="{{ _section_id }}" class="usa-nav-submenu" aria-hidden="true">
            {% for _link in section_links %}
            <li>
              <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
            </li>
            {% endfor %}
          </ul>
          {% else %}
          <a class="usa-nav-link{% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
            <span>{{ _section.text }}</span>
          </a>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
      {% endif %}

      {% assign _secondary = header.secondary %}
      {% if _secondary %}
      <div class="usa-nav-secondary">
        {% if site.search_site_handle  %}
          <form accept-charset="UTF-8" action="https://search.usa.gov/search" id="search_form" method="get" class="usa-search usa-search-small js-search-form usa-sr-only">
            <div style="margin:0;padding:0;display:inline">
              <input name="utf8" type="hidden" value="&#x2713;" />
            </div>
            <input id="affiliate" name="affiliate" type="hidden" value="{{ site.search_site_handle }}" />
            <div role="search">
              <label for="query" class="usa-sr-only">Enter Search Term(s):</label>
              <input autocomplete="off" class="usagov-search-autocomplete" id="query" name="query" type="search" />
              <button type="submit" name="commit">
                <span class="usa-sr-only">Search</span>
              </button>
            </div>
          </form>
        {% endif %}
        <ul class="usa-unstyled-list usa-nav-secondary-links">
          {% if site.search_site_handle %}
          <li class="js-search-button-container">
            <button class="usa-header-search-button js-search-button">Search</button>
          </li>
          {% endif %}
          {% assign secondary_links = site.data.navigation[_secondary.links] | default: _secondary.links %}
          {% for _link in secondary_links %}
          <li>
            <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}

    </div>
  </nav>
</header>
<div class="usa-overlay"></div>
{% endif %}