{% load components %}
{# Django template for Header #}
<header class="
  usa-header
  usx-header
  {% if not extended %}usa-header--basic{% endif %}
  {% if megamenu and not extended %}usa-header--megamenu{% endif %}
  {% if extended %}usa-header--extended{% endif %}
  {{ className }}
" {% if id %}id="{{ id }}"{% endif %} {% if styles %}style="{{ styles|safe }}"{% endif %}>
  {% if not extended %}
    <div class="usa-nav-container">
  {% endif %}
  <div class="usa-navbar">
    <div class="usa-logo usx-logo">
      {% if branding.logo %}
        {% firstof branding.alt branding.title '' as brandingLabel %}
        <a href="{{ projectUrl|default:'/' }}" class="usx-image usx-logo__image">
          {% image src=branding.logo alt=brandingLabel staticBaseUrl=staticBaseUrl className='usx-logo__variant' %}{% endimage %}
          {% if branding.logoInverse %}
            {% image src=branding.logoInverse alt=brandingLabel staticBaseUrl=staticBaseUrl className='usx-logo__variant usx-logo__variant--inverse' %}{% endimage %}
          {% endif %}
        </a>
      {% elif branding.symbol or branding.symbolInverse or branding.title %}
        <em class="usa-logo__text">
          {% if branding.symbol %}
            <img src="{% asset_url branding.symbol staticBaseUrl %}" alt="" aria-hidden="true" class="usx-logo__symbol usx-logo__variant" />
          {% endif %}
          {% if branding.symbolInverse %}
            <img src="{% asset_url branding.symbolInverse staticBaseUrl %}" alt="" aria-hidden="true" class="usx-logo__symbol usx-logo__variant usx-logo__variant--inverse" />
          {% endif %}
          {% if branding.title %}
            <a href="{{ projectUrl|default:'/' }}" class="usx-logo__title">{{ branding.title }}</a>
          {% endif %}
        </em>
      {% endif %}
    </div>
    <button type="button" class="usa-menu-btn align-center">
      {% if useMenuIcon %}
        {% icon name='menu' size=3 %}{% endicon %}
      {% else %}
        Menu
      {% endif %}
    </button>
  </div>

  {% if not extended %}
    <nav aria-label="Primary navigation" class="usa-nav usx-nav{% if stickyNav %} usx-nav--sticky{% endif %}">
      <button type="button" class="usa-nav__close">
        {% icon name='close' %}{% endicon %}
      </button>
      <ul class="usa-nav__primary usa-accordion">
        {% for section in navSections %}
          <li class="usa-nav__primary-item">
            {% if section.href %}
              <a href="{{ section.href }}" class="usa-nav__link" {% if section.ariaLabel %}aria-label="{{ section.ariaLabel }}"{% endif %}>
                <span>{{ section.title }}</span>
                {% if section.external %}<span class="usa-sr-only">External.</span>{% icon name='launch' size=1 className='margin-left-05' %}{% endicon %}{% endif %}
              </a>
            {% else %}
              <button type="button" class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="{{ id }}-nav-section-{{ forloop.counter0 }}">
                <span>{{ section.title }}</span>
              </button>
              {% if section.links %}
                {% if megamenu %}
                  <div id="{{ id }}-nav-section-{{ forloop.counter0 }}" class="usa-nav__submenu usa-megamenu" hidden="hidden">
                    <div class="grid-row grid-gap-4">
                      <div class="usa-col">
                        <ul class="usa-nav__submenu-list">
                          {% for link in section.links %}
                            <li class="usa-nav__submenu-item">
                              <a href="{{ link.href }}" {% if link.ariaLabel %}aria-label="{{ link.ariaLabel }}"{% endif %}>
                                {{ link.text }}
                                {% if link.external %}<span class="usa-sr-only">External.</span>{% icon name='launch' size=1 className='margin-left-05' %}{% endicon %}{% endif %}
                              </a>
                            </li>
                          {% endfor %}
                        </ul>
                      </div>
                    </div>
                  </div>
                {% else %}
                  <ul id="{{ id }}-nav-section-{{ forloop.counter0 }}" class="usa-nav__submenu" hidden="hidden">
                    {% for link in section.links %}
                      <li class="usa-nav__submenu-item">
                        <a href="{{ link.href }}" {% if link.ariaLabel %}aria-label="{{ link.ariaLabel }}"{% endif %}>
                          <span>{{ link.text }}</span>
                          {% if link.external %}<span class="usa-sr-only">External.</span>{% icon name='launch' size=1 className='margin-left-05' %}{% endicon %}{% endif %}
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                {% endif %}
              {% endif %}
            {% endif %}
          </li>
        {% endfor %}
      </ul>
      {% if utilityContent or searchProps %}
        <div class="usx-nav__utility">
          {% if utilityContent %}{{ utilityContent|safe }}{% endif %}
          {% if searchProps %}
            {% search id=searchProps.id ariaLabel=searchProps.ariaLabel searchKey=searchProps.searchKey label=searchProps.label icon=searchProps.icon iconOnly=searchProps.iconOnly buttonVariant=searchProps.buttonVariant big=searchProps.big action=searchProps.action placeholder=searchProps.placeholder defaultValue=searchProps.defaultValue onSubmit=searchProps.onSubmit className=searchProps.className|default:'' %}{% endsearch %}
          {% endif %}
        </div>
      {% endif %}
    </nav>
  {% endif %}
  {% if not extended %}</div>{% endif %}
</header>
{% if extended %}
  <nav aria-label="Primary navigation" class="usa-nav usx-nav{% if stickyNav %} usx-nav--sticky{% endif %}">
    <div class="usa-nav__inner">
      <button type="button" class="usa-nav__close">
        {% icon name='close' %}{% endicon %}
      </button>
      <ul class="usa-nav__primary usa-accordion">
        {% for section in navSections %}
          <li class="usa-nav__primary-item">
            {% if section.href %}
              <a href="{{ section.href }}" class="usa-nav__link" {% if section.ariaLabel %}aria-label="{{ section.ariaLabel }}"{% endif %}>
                <span>{{ section.title }}</span>
                {% if section.external %}<span class="usa-sr-only">External.</span>{% icon name='launch' size=1 className='margin-left-05' %}{% endicon %}{% endif %}
              </a>
            {% else %}
              <button type="button" class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="{{ id }}-nav-section-{{ forloop.counter0 }}">
                <span>{{ section.title }}</span>
              </button>
              {% if section.links %}
                {% if megamenu %}
                  <div id="{{ id }}-nav-section-{{ forloop.counter0 }}" class="usa-nav__submenu usa-megamenu" hidden="hidden">
                    <div class="grid-row grid-gap-4">
                      <div class="usa-col">
                        <ul class="usa-nav__submenu-list">
                          {% for link in section.links %}
                            <li class="usa-nav__submenu-item">
                              <a href="{{ link.href }}" {% if link.ariaLabel %}aria-label="{{ link.ariaLabel }}"{% endif %}>
                                {{ link.text }}
                                {% if link.external %}<span class="usa-sr-only">External.</span>{% icon name='launch' size=1 className='margin-left-05' %}{% endicon %}{% endif %}
                              </a>
                            </li>
                          {% endfor %}
                        </ul>
                      </div>
                    </div>
                  </div>
                {% else %}
                  <ul id="{{ id }}-nav-section-{{ forloop.counter0 }}" class="usa-nav__submenu" hidden="hidden">
                    {% for link in section.links %}
                      <li class="usa-nav__submenu-item">
                        <a href="{{ link.href }}" {% if link.ariaLabel %}aria-label="{{ link.ariaLabel }}"{% endif %}>
                          <span>{{ link.text }}</span>
                          {% if link.external %}<span class="usa-sr-only">External.</span>{% icon name='launch' size=1 className='margin-left-05' %}{% endicon %}{% endif %}
                        </a>
                      </li>
                    {% endfor %}
                  </ul>
                {% endif %}
              {% endif %}
            {% endif %}
          </li>
        {% endfor %}
      </ul>
      <div class="usa-nav__secondary">
        <ul class="usa-nav__secondary-links">
          {% for link in secondaryLinks %}
            <li class="usa-nav__secondary-item">
              <a href="{{ link.href }}" {% if link.ariaLabel %}aria-label="{{ link.ariaLabel }}"{% endif %}>
                <span>{{ link.text }}</span>
                {% if link.external %}<span class="usa-sr-only">External.</span>{% icon name='launch' size=1 className='margin-left-05' %}{% endicon %}{% endif %}
              </a>
            </li>
          {% endfor %}
        </ul>
        {% if utilityContent or searchProps %}
          <div class="usx-nav__utility">
            {% if utilityContent %}{{ utilityContent|safe }}{% endif %}
            {% if searchProps %}
              {% search id=searchProps.id ariaLabel=searchProps.ariaLabel searchKey=searchProps.searchKey label=searchProps.label icon=searchProps.icon iconOnly=searchProps.iconOnly buttonVariant=searchProps.buttonVariant big=searchProps.big action=searchProps.action placeholder=searchProps.placeholder defaultValue=searchProps.defaultValue onSubmit=searchProps.onSubmit className=searchProps.className|default:'' %}{% endsearch %}
            {% endif %}
          </div>
        {% endif %}
      </div>
      {% if navEndContent %}<div class="usx-nav__end-slot">{{ navEndContent|safe }}</div>{% endif %}
    </div>
  </nav>
{% endif %}