{{#let (unique-id) as |guid|}}
  <App
    class="hashicorp-consul"
    ...attributes
  >

    <:home-nav>
      <a
        href={{href-to 'index'}}
      ><Consul::Logo /></a>
    </:home-nav>

    <:main-nav>
  {{#if @dc}}
      <ul>

        <li
          class="dcs"
          data-test-datacenter-menu
        >
          <PopoverMenu
            aria-label="Datacenter"
            @position="left"
          as |components|>
            <BlockSlot @name="trigger">
              {{@dc.Name}}
            </BlockSlot>
            <BlockSlot @name="menu">
{{#let components.MenuItem components.MenuSeparator as |MenuItem MenuSeparator|}}
              <DataSource
                @src="/*/*/datacenters"
                @onchange={{action (mut @dcs) value="data"}}
                @loading="lazy"
              />
  {{#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-to '.' params=(hash dc=item.Name)}}
                >
                  <BlockSlot @name="label">
                    {{item.Name}}
                  {{#if item.Local}}
                    <span>Local</span>
                  {{/if}}
                  </BlockSlot>
                </MenuItem>
  {{/each}}
{{/let}}
            </BlockSlot>
          </PopoverMenu>
        </li>

    {{#let (or this.nspaces @nspaces) as |nspaces|}}
    {{#if (can "choose nspaces" nspaces=nspaces)}}
          <li
            class="nspaces"
            data-test-nspace-menu
          >
              <PopoverMenu
                aria-label="Namespace"
                @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|}}
                    <DataSource
                      @src="/*/*/namespaces"
                      @onchange={{action (mut this.nspaces) value="data"}}
                      @loading="lazy"
                    />
                  {{#each (reject-by 'DeletedAt' nspaces) as |item|}}
                    <MenuItem
                      class={{if (eq @nspace.Name item.Name) 'is-active'}}
                      @href={{href-to '.' params=(hash nspace=item.Name)}}
                    >
                      <BlockSlot @name="label">
                        {{item.Name}}
                      </BlockSlot>
                    </MenuItem>
                  {{/each}}
          {{#if (can 'manage nspaces')}}
                    <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>
          </li>
    {{/if}}
    {{/let}}
{{#if (can "read services")}}
          <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>
{{/if}}
{{#if (can "read nodes")}}
          <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>
{{/if}}
{{#if (can "read kv")}}
          <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>
{{/if}}
{{#if (can "read intentions")}}
          <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>
{{/if}}
          <li class="acls-separator" role="separator">
            Access Controls
{{#if (not (can "use acls"))}}
            <span
              {{tooltip "ACLs are not currently enabled in this cluster"}}
            ></span>
{{/if}}
          </li>
          <li data-test-main-nav-tokens class={{if (is-href 'dc.acls.tokens' @dc.Name) 'is-active'}}>
              <a href={{href-to 'dc.acls.tokens' @dc.Name}}>Tokens</a>
          </li>
{{#if (can "read acls")}}
          <li data-test-main-nav-policies class={{if (is-href 'dc.acls.policies' @dc.Name) 'is-active'}}>
              <a href={{href-to 'dc.acls.policies' @dc.Name}}>Policies</a>
          </li>
          <li data-test-main-nav-roles class={{if (is-href 'dc.acls.roles' @dc.Name) 'is-active'}}>
              <a href={{href-to 'dc.acls.roles' @dc.Name}}>Roles</a>
          </li>
          <li data-test-main-nav-auth-methods class={{if (is-href 'dc.acls.auth-methods' @dc.Name) 'is-active'}}>
              <a href={{href-to 'dc.acls.auth-methods' @dc.Name}}>Auth Methods</a>
          </li>
{{else if (not (can "use acls"))}}
          <li data-test-main-nav-policies class={{if (is-href 'dc.acls.policies' @dc.Name) 'is-active'}}>
              <span>Policies</span>
          </li>
          <li data-test-main-nav-roles class={{if (is-href 'dc.acls.roles' @dc.Name) 'is-active'}}>
              <span>Roles</span>
          </li>
          <li data-test-main-nav-auth-methods class={{if (is-href 'dc.acls.auth-methods' @dc.Name) 'is-active'}}>
              <span>Auth Methods</span>
          </li>
{{/if}}
      </ul>
  {{/if}}

    </:main-nav>

    <:complementary-nav>
      <ul>
          <Debug::Navigation />
          <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|}}
                  <MenuSeparator>
                    <BlockSlot @name="label">
                      Consul v{{env 'CONSUL_VERSION'}}
                    </BlockSlot>
                  </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="learn-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 (can 'authenticate')}}
          <li data-test-main-nav-auth>
            <AuthDialog
              @dc={{@dc.Name}}
              @nspace={{@nspace.Name}}
              @onchange={{this.reauthorize}} as |authDialog components|
            >
              {{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}}
                <BlockSlot @name="unauthorized">
                  <Portal @target="app-before-skip-links">
                    <button
                      type="button"
                      {{on "click" (optional this.modal.open)}}
                    >
                      Login
                    </button>
                  </Portal>
                  <button
                    type="button"
                    {{on "click" (optional this.modal.open)}}
                  >
                    Log in
                  </button>
                  <ModalDialog
                    @name="login-toggle"
                    @onclose={{this.close}}
                    @onopen={{this.open}}
                    @aria={{hash
                      label="Log in to Consul"
                    }}
                  as |modal|>
                    <Ref @target={{this}} @name="modal" @value={{modal}} />
                    <BlockSlot @name="header">
                      <h2>Log in to Consul</h2>
                    </BlockSlot>
                    <BlockSlot @name="body">
                      <AuthForm as |authForm|>
                        <Ref @target={{this}} @name="authForm" @value={{authForm}} />
                      </AuthForm>
                    </BlockSlot>
                    <BlockSlot @name="actions">
                      <button type="button"
                        {{on "click" modal.close}}
                      >
                        Continue without logging in
                      </button>
                    </BlockSlot>
                  </ModalDialog>
                </BlockSlot>
                <BlockSlot @name="authorized">
                  <ModalDialog
                    @name="login-toggle"
                    @onclose={{this.close}}
                    @onopen={{this.open}}
                    @aria={{hash
                      label="Log in with a different token"
                    }}
                  as |modal|>
                    <Ref @target={{this}} @name="modal" @value={{modal}} />
                    <BlockSlot @name="header">
                      <h2>Log in with a different token</h2>
                    </BlockSlot>
                    <BlockSlot @name="body">
                      <AuthForm as |authForm|>
                        <Ref @target={{this}} @name="authForm" @value={{authForm}} />
                      </AuthForm>
                    </BlockSlot>
                    <BlockSlot @name="actions">
                      <button type="button" onclick={{action modal.close}}>
                        Continue without logging in
                      </button>
                    </BlockSlot>
                  </ModalDialog>
                  <Portal @target="app-before-skip-links">
                    <button
                      type="button"
                      {{on "click" (optional authDialog.logout)}}
                    >
                      Logout
                    </button>
                  </Portal>
                  <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>
    </:complementary-nav>

    <:main>
      {{yield (hash
        login=(if (env 'CONSUL_ACLS_ENABLED') this.modal (hash open=undefined))
      )}}
    </:main>

    <:content-info>
      <p>
        Consul v{{env 'CONSUL_VERSION'}}
      </p>
      {{{concat '<!-- ' (env 'CONSUL_GIT_SHA') '-->'}}}
    </:content-info>
  </App>
{{/let}}