    <ModalLayer />
    <header role="banner" data-test-navigation>
      <a data-test-main-nav-logo href={{href-to 'index'}}><Consul::Logo /></a>
        <input type="checkbox" name="menu" id="main-nav-toggle" onchange={{action 'change'}} />
        <label for="main-nav-toggle">
          Toggle Menu
        </label>
        <div>
            <label for="main-nav-toggle">
                <span>Close</span>
            </label>
            <nav aria-label="Main">
{{#if dc}}
                <ul>
  {{#if (and (env 'CONSUL_NSPACES_ENABLED') (gt nspaces.length 0))}}
                    <li class="nspaces" data-test-nspace-menu>
    {{#if (and (eq nspaces.length 1) (not canManageNspaces)) }}
                        <span data-test-nspace-selected={{nspace.Name}}>{{nspace.Name}}</span>
    {{ else }}
                        <PopoverMenu @position="left" as |components api|>
                          <BlockSlot @name="trigger">
                            {{nspace.Name}}
                          </BlockSlot>
                        {{#if (is-href 'dc.nspaces')}}
                          <BlockSlot @name="header">
                            <p>
					                    Namespaces themselves are not namespaced, so switching will not change the current view.
                            </p>
                          </BlockSlot>
                        {{/if}}
                          <BlockSlot @name="menu">
                            {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
                              <MenuSeparator>
                                <BlockSlot @name="label">
                                  Namespaces
                                  <DataSource
                                    @src="/*/*/namespaces"
                                    @onchange={{action (mut nspaces) value="data"}}
                                    @loading="lazy"
                                  />
                                </BlockSlot>
                              </MenuSeparator>
                            {{#each (reject-by 'DeletedAt' nspaces) as |item|}}
                              <MenuItem
                                class={{if (eq nspace.Name item.Name) 'is-active'}}
                                @href={{href-mut (hash nspace=(concat '~' item.Name))}}
                              >
                                <BlockSlot @name="label">
                                  {{item.Name}}
                                </BlockSlot>
                              </MenuItem>
                            {{/each}}
                    {{#if canManageNspaces }}
                              <MenuSeparator />
                              <MenuItem
                                data-test-main-nav-nspaces
                                @href={{href-to 'dc.nspaces' dc.Name}}
                              >
                                <BlockSlot @name="label">
                                  Manage Namespaces
                                </BlockSlot>
                              </MenuItem>
                    {{/if}}
                            {{/let}}
                          </BlockSlot>
                        </PopoverMenu>
    {{/if}}
                    </li>
  {{/if}}
                    <li data-test-datacenter-menu>
  {{#if (or (not dcs) (eq dcs.length 1)) }}
                        <span data-test-datacenter-selected={{dc.Name}}>{{dc.Name}}</span>
  {{ else }}
                        <PopoverMenu @position="left" as |components|>
                          <BlockSlot @name="trigger">
                            {{dc.Name}}
                          </BlockSlot>
                          <BlockSlot @name="menu">
                            {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
                            <MenuSeparator>
                              <BlockSlot @name="label">
                                Datacenters
                                <DataSource
                                  @src="/*/*/datacenters"
                                  @onchange={{action (mut dcs) value="data"}}
                                  @loading="lazy"
                                />
                              </BlockSlot>
                            </MenuSeparator>
                            {{#each (sort-by 'Name' dcs) as |item|}}
                              <MenuItem
                                data-test-datacenter-picker
                                class={{concat (if (eq dc.Name item.Name) 'is-active') (if item.Local ' is-local') }}
                                @href={{href-mut (hash dc=item.Name)}}
                              >
                                <BlockSlot @name="label">
                                  <span>{{item.Name}}</span>
                                {{#if item.Local}}
                                  <span>Local</span>
                                {{/if}}
                                </BlockSlot>
                              </MenuItem>
                            {{/each}}
                            {{/let}}
                          </BlockSlot>
                        </PopoverMenu>

  {{/if}}
                    </li>
                    <li data-test-main-nav-services class={{if (is-href 'dc.services' dc.Name) 'is-active'}}>
                        <a href={{href-to 'dc.services' dc.Name}}>Services</a>
                    </li>
                    <li data-test-main-nav-nodes class={{if (is-href 'dc.nodes' dc.Name) 'is-active'}}>
                        <a href={{href-to 'dc.nodes' dc.Name}}>Nodes</a>
                    </li>
                    <li data-test-main-nav-kvs class={{if (is-href 'dc.kv' dc.Name) 'is-active'}}>
                        <a href={{href-to 'dc.kv' dc.Name}}>Key/Value</a>
                    </li>
                    <li data-test-main-nav-acls class={{if (or (is-href 'dc.acls' dc.Name) (is-href 'dc.aclsdisabled') (is-href 'dc.unauthorized')) 'is-active'}}>
                        <a href={{href-to 'dc.acls.tokens' dc.Name}}>ACL</a>
                    </li>
                    <li data-test-main-nav-intentions class={{if (is-href 'dc.intentions' dc.Name) 'is-active'}}>
                        <a href={{href-to 'dc.intentions' dc.Name}}>Intentions</a>
                    </li>
                </ul>
{{/if}}
            </nav>
            <nav>
                <ul>
                    <li data-test-main-nav-help>
                      <PopoverMenu @position="right" as |components|>
                        <BlockSlot @name="trigger">
                          Help
                        </BlockSlot>
                        <BlockSlot @name="menu">
                          {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
                            <MenuItem
                              class="docs-link"
                              @href={{env 'CONSUL_DOCS_URL'}}
                            >
                              <BlockSlot @name="label">
                                Documentation
                              </BlockSlot>
                            </MenuItem>
                            <MenuItem
                              class="learn-link"
                              @href={{concat (env 'CONSUL_DOCS_LEARN_URL') '/consul'}}
                            >
                              <BlockSlot @name="label">
                                HashiCorp Learn
                              </BlockSlot>
                            </MenuItem>
                            <MenuSeparator />
                            <MenuItem
                              class="feedback-link"
                              @href={{env 'CONSUL_REPO_ISSUES_URL'}}
                            >
                              <BlockSlot @name="label">
                                Provide Feedback
                              </BlockSlot>
                            </MenuItem>
                          {{/let}}
                        </BlockSlot>
                      </PopoverMenu>
                    </li>
                    <li data-test-main-nav-settings class={{if (is-href 'settings') 'is-active'}}>
                        <a href={{href-to 'settings'}}>Settings</a>
                    </li>
{{#if (env 'CONSUL_ACLS_ENABLED')}}
                    <li data-test-main-nav-auth>
                      <AuthDialog
                        @dc={{dc.Name}}
                        @nspace={{nspace.Name}}
                        @onchange={{action "reauthorize"}} as |authDialog components|
                      >
                        {{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}}
                          <BlockSlot @name="unauthorized">
                            <label tabindex="0" for="login-toggle" onkeypress={{action 'keypressClick'}}>
                              <span>Log in</span>
                            </label>
                            <ModalDialog @name="login-toggle" @onclose={{action 'close'}} @onopen={{action 'open'}} as |api|>
                              <Ref @target={{this}} @name="modal" @value={{api}} />
                              <BlockSlot @name="header">
                                <h2>Log in to Consul</h2>
                              </BlockSlot>
                              <BlockSlot @name="body">
                                <AuthForm as |api|>
                                  <Ref @target={{this}} @name="authForm" @value={{api}} />
                                </AuthForm>
                              </BlockSlot>
                              <BlockSlot @name="actions" as |close|>
                                <button type="button" onclick={{action close}}>
                                  Continue without logging in
                                </button>
                              </BlockSlot>
                            </ModalDialog>
                          </BlockSlot>
                          <BlockSlot @name="authorized">
                            <ModalDialog @name="login-toggle" @onclose={{action 'close'}} @onopen={{action 'open'}} as |api|>
                              <Ref @target={{this}} @name="modal" @value={{api}} />
                              <BlockSlot @name="header">
                                <h2>Log in with a different token</h2>
                              </BlockSlot>
                              <BlockSlot @name="body">
                                <AuthForm as |api|>
                                  <Ref @target={{this}} @name="authForm" @value={{api}} />
                                </AuthForm>
                              </BlockSlot>
                              <BlockSlot @name="actions" as |close|>
                                <button type="button" onclick={{action close}}>
                                  Continue without logging in
                                </button>
                              </BlockSlot>
                            </ModalDialog>
                            <PopoverMenu @position="right" as |components api|>
                              <BlockSlot @name="trigger">
                                Logout
                              </BlockSlot>
                              <BlockSlot @name="menu">
                                {{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
        {{!TODO: It might be nice to use one of our recursive components here}}
        {{#if authDialog.token.AccessorID}}
                                    <li role="none">
                                      <AuthProfile />
                                    </li>
                                    <MenuSeparator />
        {{/if}}
                                    <MenuItem
                                      class="dangerous"
                                      @onclick={{action authDialog.logout}}
                                    >
                                      <BlockSlot @name="label">
                                        Logout
                                      </BlockSlot>
                                    </MenuItem>
                                  {{/let}}
                              </BlockSlot>
                            </PopoverMenu>
                          </BlockSlot>
                        {{/let}}
                      </AuthDialog>
                    </li>
{{/if}}
                </ul>
            </nav>
        </div>
    </header>
    <main>
{{yield}}
    </main>
    <footer role="contentinfo" data-test-footer>
        <a data-test-footer-copyright href="{{env 'CONSUL_COPYRIGHT_URL'}}/" rel="noopener noreferrer" target="_blank">&copy; {{env 'CONSUL_COPYRIGHT_YEAR'}} HashiCorp</a>
        <p data-test-footer-version>Consul {{env 'CONSUL_VERSION'}}</p>
        <a data-test-footer-docs href="{{env 'CONSUL_DOCS_URL'}}" rel="help noopener noreferrer" target="_blank">Documentation</a>
        {{{concat '<!-- ' (env 'CONSUL_GIT_SHA') '-->'}}}
    </footer>