<header class="header">
  <div class="container">
    <div class="header__logo">
      <a href="/{UIF_VERSION}" style="display: inline-block;">
        <svg class="pf-logo pf-logo--inline">
          <use xlink:href="/{UIF_VERSION}/assets/images/icons/logos.svg#logo-inline" />
        </svg>
      </a>
      <span class="text-small text-highlight" style="vertical-align: top;">{UIF_PATCH_VERSION}</span>
    </div>

    {{#unless docs}}
    <div class="header__nav">
      <a href="#profile-nav-mobile" class="link--silent text-caps text-small text-bold header__hamburger header__hamburger--{{#if signed-in}}signed-in{{else}}signed-out{{/if}}">
        <span class="header__hamburger-icon" data-js="modal-toggle" data-modal-target="#profile-nav-mobile"><span>Menu</span><span class="icon icon--24x24 icon--hamburger-grey"></span></span>
        <span class="icon icon--24x24 icon--x-orange header__hamburger-close" data-js="modal-close"></span>
      </a>
      {{#if signed-in}}
      <div class="header__profile fly-out" data-js="fly-out" data-fly-out-event-type="click">
        <a href="#" class="link--alt header__profile-link" data-js="fly-out-toggle">
          <span class="icon icon--profile-placeholder header__profile-pic"></span><span>Obi Wan Kenobi</span><span class="icon icon--down-grey"></span>
        </a>
        <div class="header__fly-out fly-out__content">
          <div id="profile-nav">
            <span class="header__profile-nav-head"><span class="icon icon--profile-placeholder header__profile-pic"></span><span>Obi Wan Kenobi</span></span>
            {{#each nav}}
              {{> nav}}
            {{/each}}
          </div>
        </div>
      </div>
      {{else}}
      <div class="header__nav-x">
        <nav class="nav">
          <ul class="nav__list">
            <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom">
              <a href="#" class="nav__link link--alt text-caps text-small">Get a loan</a>
            </li>
            <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom">
              <a href="#" class="nav__link link--alt text-caps text-small">Prospective investors</a>
            </li>
            <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom is-current">
              <a href="#" class="nav__link link--alt text-caps text-small">Resources</a>
            </li>
            <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom">
              <a href="#" class="nav__link link--alt text-caps text-small">Community</a>
            </li>
            <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom fly-out" data-js="fly-out" data-fly-out-event-type="hover">
              <span class="nav__link link--alt text-caps text-small" data-js="fly-out-toggle">About us</span>
              <nav class="fly-out__content nav nav--showroom" data-js="fly-out-content">
                <ul class="nav__list">
                  <li class="nav__list-item"><a href="#" class="nav__link nav__link--showroom">Our story</a></li>
                  <li class="nav__list-item"><a href="#" class="nav__link nav__link--showroom">Press</a></li>
                  <li class="nav__list-item"><a href="#" class="nav__link nav__link--showroom">Careers</a></li>
                </ul>
              </nav>
            </li>
            <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom">
              <a href="#" class="nav__link btn btn--secondary btn--xsmall text-small">Sign in</a>
            </li>
            <li class="nav__list-item nav__list-item--x-large nav__list-item--x-space nav__list-item--x-showroom fly-out" data-js="fly-out" data-fly-out-event-type="click" data-fly-out-position="center">
              <a href="#" class="nav__link btn btn--primary btn--small text-small" data-js="fly-out-toggle">Get started</a>
              <div class="fly-out__content" data-js="fly-out-content">
                <div class="nav nav--chrome nav--chrome-pointer nav--get-started">
                  <div class="grid grid--divide-x text-center">
                    <div class="grid__half panel__content">
                      <p class="heading--sub text-caps text-bold text-small">Apply for a student loan</p>
                      <a href="#" class="btn btn--primary btn--xsmall btn--block no-wrap">Apply now</a>
                    </div>
                    <div class="grid__half panel__content">
                      <p class="heading--sub text-caps text-bold text-small">Prospective investors</p>
                      <a href="#" class="btn btn--secondary btn--xsmall btn--block no-wrap">Learn more</a>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </nav>
      </div>
      {{/if}}
    </div>
    {{/unless}}
  </div>
</header>

{{#unless docs}}
<div id="profile-nav-mobile" class="modal" data-js="modal" data-modal-max-visible-width="640" data-modal-fs="true">
  <div class="modal__box modal--fs-menu">
    <div class="modal__content">
      {{#if signed-in}}
        <span class="header__profile-nav-head"><span class="icon icon--profile-placeholder header__profile-pic"></span><span>Obi Wan Kenobi</span></span>
        {{#each nav}}
          {{> nav}}
        {{/each}}
      {{else}}
        <nav class="nav">
          <ul class="nav__list accordion" data-js="accordion" data-accordion-start="all-closed" data-accordion-type="open-single">
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome">Get a loan</a>
            </li>
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome">Prospective investors</a>
            </li>
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome">Resources</a>
            </li>
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome">Community</a>
            </li>
            <li class="nav__list-item accordion__segment accordion__segment--chrome" data-js="accordion-segment">
              <a href="#" class="nav__link nav__link--chrome accordion__toggle accordion__toggle--chrome" data-js="accordion-toggle">About us</a>
              <ul class="nav__list accordion__content accordion__content--chrome" data-js="accordion-content">
                <li class="nav__list-item"><a href="#" class="nav__link nav__link--chrome">Our story</a></li>
                <li class="nav__list-item"><a href="#" class="nav__link nav__link--chrome">Press</a></li>
                <li class="nav__list-item"><a href="#" class="nav__link nav__link--chrome">Careers</a></li>
              </ul>
            </li>
            <li class="nav__list-item">
              <a href="#" class="nav__link nav__link--chrome">Sign in</a>
            </li>
          </ul>
          <div class="panel__content">
            <p><a href="#" class="btn btn--primary btn--xsmall btn--block">Apply for a student loan</a></p>
            <p><a href="#" class="btn btn--secondary btn--xsmall btn--block">Learn more about investing</a></p>
          </div>
        </nav>
      {{/if}}
    </div>
  </div>
</div>
{{/unless}}
