{{#if showNav}}
  <NavHeader data-test-header-with-nav @class="{{if consoleOpen 'panel-open'}}"
    as |Nav|>
    <Nav.home>
      <HomeLink @class="navbar-item has-text-white has-current-color-fill">
        {{partial 'svg/vault-logo'}}
      </HomeLink>
    </Nav.home>
    <Nav.main>
      <ul class="navbar-sections {{if (has-feature "Namespaces") 'with-ns-picker'}}">
        {{#if (has-feature "Namespaces")}}
          <li>
            <NamespacePicker
              @class="navbar-item"
              @namespace={{namespaceQueryParam}}
            >
            </NamespacePicker>
          </li>
        {{/if}}
        <li class="{{if (is-active-route 'vault.cluster.secrets') 'is-active'}}">
          {{#link-to
            "vault.cluster.secrets"
            current-when="vault.cluster.secrets vault.cluster.settings.mount-secret-backend vault.cluster.settings.configure-secret-backend"
            invokeAction=(action Nav.closeDrawer)
          }}
            Secrets
          {{/link-to}}
        </li>
        <li class="{{if (is-active-route 'vault.cluster.access') 'is-active'}}">
          {{#link-to
            "vault.cluster.access"
              current-when="vault.cluster.access vault.cluster.settings.auth"
              invokeAction=(action Nav.closeDrawer)
            }}
            Access
          {{/link-to}}
        </li>
        <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"
            invokeAction=(action Nav.closeDrawer)
          }}
            Policies
          {{/link-to}}
        </li>
        <li class="{{if (is-active-route 'vault.cluster.tools') 'is-active'}}">
          {{#link-to
            "vault.cluster.tools.tool"
            "wrap"
            invokeAction=(action Nav.closeDrawer)
          }}
            Tools
          {{/link-to}}
        </li>
      </ul>
    </Nav.main>
    <Nav.items>
      <div class="navbar-separator is-hidden-tablet"></div>
      {{#if namespaceService.inRootNamespace}}
        <div class="navbar-item status-indicator-button" data-status="{{if activeCluster.unsealed "good" "bad"}}">
          <StatusMenu @label="Status" @onLinkClick={{action Nav.closeDrawer}} />
        </div>
        <div class="navbar-separator is-hidden-mobile"></div>
      {{/if}}
      <div class="navbar-item">
        <button type="button" class="button is-transparent nav-console-button{{if consoleOpen " popup-open"}}"
          {{action (queue (action 'toggleConsole') (action Nav.closeDrawer))}} data-test-console-toggle>
          <ICon @glyph="console" @size=24 />
          <div class="status-menu-label">
            Console
          </div>
          <ICon @glyph="chevron-down" @aria-hidden="true" @size=8 @class="has-text-white is-status-chevron" />
        </button>
      </div>
      <div class="navbar-item nav-user-button {{if auth.allowExpiration "may-expire"}}" data-test-allow-expiration="{{auth.allowExpiration}}">
        <StatusMenu @type="user" @label="User" @onLinkClick={{action Nav.closeDrawer}} />
      </div>
    </Nav.items>
  </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}}
        <div class="message {{get (message-types flash.type) "class"}}">
          <div class="columns is-mobile is-variable is-1">
            <div class="column is-narrow message-icon">
              <ICon @glyph="{{get (message-types flash.type) "glyph"}}" @size="20" @excludeIconClass={{true}} />
            </div>
            <div class="column">
              <button type="button" class="close-button" {{action close}}>
                {{i-con excludeIconClass=true glyph="close" aria-label="Close"}}
              </button>
              <div class="message-title">
                {{get (message-types flash.type) "text"}}
              </div>
              {{#if flash.message}}
                <p class="message-body" data-test-flash-message-body="true">
                  {{flash.message}}
                </p>
              {{/if}}
            </div>
          </div>
        </div>
      {{/if}}
    {{/flash-message}}
  {{/each}}
</div>
{{#if showNav}}
  <UiWizard>
    <section class="section">
      <div class="container is-widescreen">
        <TokenExpireWarning @expirationDate={{auth.tokenExpirationDate}}>
          {{outlet}}
        </TokenExpireWarning>
      </div>
    </section>
  </UiWizard>
{{else}}
  {{outlet}}
{{/if}}