{{#if showNav}}
  <NavHeader data-test-header-with-nav @class="{{if consoleOpen 'panel-open'}} {{if consoleFullscreen ' panel-fullscreen'}}" as |Nav|>
    <Nav.home>
      {{#if (has-feature "Namespaces")}}
        {{#if media.isMobile}}
          <NamespacePicker
            @class="navbar-item has-text-white has-current-color-fill"
            @namespace={{namespaceQueryParam}}
          >
            {{partial 'svg/vault-logo'}}
          </NamespacePicker>
        {{/if}}
      {{else}}
        <HomeLink @class="navbar-item has-text-white has-current-color-fill">
          {{partial 'svg/vault-logo'}}
        </HomeLink>
      {{/if}}
    </Nav.home>
    <Nav.items>
      <div class="navbar-item">
        <button type="button" class="button is-transparent" {{action 'toggleConsole'}} data-test-console-toggle>
          {{#if consoleOpen}}
            {{i-con glyph="console-active" size=24}}
            {{i-con glyph="chevron-up" aria-hidden="true" size=8 class="has-text-white auto-width is-status-chevron"}}
          {{else}}
            {{i-con glyph="console" size=24}}
            {{i-con glyph="chevron-down" aria-hidden="true" size=8 class="has-text-white auto-width is-status-chevron"}}
          {{/if}}
        </button>
      </div>
      {{#if namespaceService.inRootNamespace}}
        <div class="navbar-item">
          {{status-menu}}
        </div>
      {{/if}}
      <div class="navbar-item">
        {{status-menu type="user"}}
      </div>
    </Nav.items>
      <Nav.main>
        <ul class="navbar-sections tabs tabs-subnav {{if (and (has-feature "Namespaces") media.isTablet) 'with-ns-picker'}}">
          {{#if (and (has-feature "Namespaces") media.isTablet) }}
            <li>
              <NamespacePicker
                @class="navbar-item has-text-white has-current-color-fill"
                @namespace={{namespaceQueryParam}}
              >
                {{partial 'svg/vault-logo'}}
              </NamespacePicker>
            </li>
          {{/if}}
          <li class="{{if (is-active-route 'vault.cluster.secrets') 'is-active'}}">
            {{#link-to "vault.cluster.secrets"}}
              Secrets
            {{/link-to}}
          </li>
          <li class="{{if (is-active-route 'vault.cluster.access') 'is-active'}}">
            {{#link-to "vault.cluster.access"}}
              Access
            {{/link-to}}
          </li>
          {{#if namespaceService.inRootNamespace}}
            <li class="{{if (is-active-route 'vault.cluster.replication') 'is-active'}}">
              {{#if activeCluster.anyReplicationEnabled}}
                {{status-menu type="replication"}}
              {{else}}
                {{#link-to "vault.cluster.replication"}}
                  Replication
                  {{#if (is-version "OSS")}}
                    <ICon @glyph="edition-enterprise" @size=16 @class="edition-icon" />
                  {{/if}}
                {{/link-to}}
              {{/if}}
            </li>
          {{/if}}
          <li class="{{if (is-active-route (array 'vault.cluster.policies' 'vault.cluster.policy')) 'is-active'}}">
            {{#link-to "vault.cluster.policies" "acl" current-when="vault.cluster.policies vault.cluster.policy"}}
              Policies
            {{/link-to}}
          </li>
          <li class="{{if (is-active-route 'vault.cluster.tools') 'is-active'}}">
            {{#link-to "vault.cluster.tools.tool" "wrap"}}
              Tools
            {{/link-to}}
          </li>
          <li class="{{if (is-active-route 'vault.cluster.settings') 'is-active'}}">
            {{#link-to "vault.cluster.settings"}}
              Settings
            {{/link-to}}
          </li>
        </ul>
        {{console/ui-panel isFullscreen=consoleFullscreen}}
      </Nav.main>
    </NavHeader>
  {{/if}}
  <div class="global-flash">
    {{#each flashMessages.queue as |flash|}}
      {{#flash-message data-test-flash-message=true flash=flash as |component flash close|}}
        {{#if flash.componentName}}
          {{component flash.componentName content=flash.content}}
        {{else}}
          <h5 class="title is-5 has-text-{{if (eq flash.type 'warning') 'dark-yellow' flash.type}}">
            {{get (message-types flash.type) "text"}}
          </h5>
          <span data-test-flash-message-body=true>
            {{flash.message}}
          </span>
          <button type="button" class="delete" {{action close}}>
            {{i-con excludeIconClass=true glyph="close" aria-label="Close"}}
          </button>
        {{/if}}
      {{/flash-message}}
    {{/each}}
  </div>
  {{#if showNav}}
    <UiWizard>
      <section class="section">
        <div class="container is-widescreen">
          {{component
            (if
              (or
                (is-after (now interval=1000) auth.tokenExpirationDate)
                (and activeClusterName auth.currentToken)
              )
              'token-expire-warning'
              null
            )
          }}
          {{#unless (and
              activeClusterName
              auth.currentToken
              (is-after (now interval=1000) auth.tokenExpirationDate)
            )
          }}
            {{outlet}}
          {{/unless}}
        </div>
      </section>
    </UiWizard>
  {{else}}
    {{outlet}}
  {{/if}}

