{{#if (and (not accessibleNamespaces.length) inRootNamespace)}}
  <div class="namespace-picker no-namespaces">
    {{!-- Just yield the logo if they're in the root namespace and only have access to it --}}
    {{yield}}
  </div>
{{else}}
  <div class="namespace-picker">
    <BasicDropdown @horizontalPosition="auto-left" @verticalPosition="below" as |D|>
      <D.trigger
        @tagName="button"
        @class="button is-transparent namespace-picker-trigger has-current-color"
        data-test-namespace-toggle
        >
        {{yield}}
        {{#if namespaceDisplay}}
          <span class="namespace-name">{{namespaceDisplay}}</span>
        {{else}}
          <span class="namespace-name is-hidden-tablet">/ (Root)</span>
        {{/if}}
        <Chevron
          @direction="down"
          @class="has-text-white auto-width is-status-chevron"
        />
      </D.trigger>
      <D.content @class="namespace-picker-content">
        <div class="is-mobile level-left">
          {{#unless isUserRootNamespace}}
            <NamespaceLink @targetNamespace={{or (object-at (dec 2 menuLeaves.length) lastMenuLeaves) auth.authData.userRootNamespace}} @class="namespace-link is-current button is-ghost icon">
              <Chevron
                @direction="left"
                @class="has-text-grey"
              />
            </NamespaceLink>
          {{/unless}}
          <h5 class="list-header">Current namespace</h5>
        </div>
        <div class="namespace-header-bar level is-mobile">
          <div class="level-left">
            <header >
              <div class="level is-mobile namespace-link">
                <span class="level-left" data-test-current-namespace>{{if namespacePath (concat namespacePath "/") "root"}}</span>
                <span class="level-right">
                  <Icon @glyph="check-circle-outline" class="has-text-success" />
                </span>
              </div>
            </header>
          </div>
        </div>
        <div class="namespace-list {{if isAnimating "animated-list"}}">
          <div class="is-mobile level-left">
          {{#unless isUserRootNamespace}}
            <NamespaceLink @targetNamespace={{or (object-at (dec 2 menuLeaves.length) lastMenuLeaves) auth.authData.userRootNamespace}} @class="namespace-link is-current button is-ghost icon">
              <Chevron
                @direction="left"
                @class="has-text-grey"
              />
            </NamespaceLink>
          {{/unless}}
          <h5 class="list-header">Namespaces</h5>
        </div>
          {{#if (contains '' lastMenuLeaves)}}
            {{!-- leaf is '' which is the root namespace, and then we need to iterate the root leaves --}}
            <div class="leaf-panel
              {{if (eq '' currentLeaf) "leaf-panel-current" "leaf-panel-left"}}
            ">{{~#each rootLeaves as |rootLeaf|}}
                <NamespaceLink @targetNamespace={{rootLeaf}} @class="namespace-link" @showLastSegment={{true}} />
              {{/each~}}</div>
          {{/if}}
          {{#each lastMenuLeaves as |leaf|}}
              <div class="leaf-panel
                {{if (eq leaf currentLeaf) "leaf-panel-current" "leaf-panel-left"}}
                {{if (and isAdding (eq leaf changedLeaf)) "leaf-panel-adding"}}
                {{if (and (not isAdding) (eq leaf changedLeaf)) "leaf-panel-exiting"}}
              ">{{~#each-in (get namespaceTree leaf) as |leafName|}}
              <NamespaceLink @targetNamespace={{concat leaf "/" leafName}} @class="namespace-link" @showLastSegment={{true}} />
                {{/each-in~}}</div>
          {{/each}}
          {{#if canList}}
            <div class="leaf-panel leaf-panel-current ">
              <LinkTo
                @params={{array "vault.cluster.access.namespaces"}}
                class="is-block namespace-link namespace-manage-link"
                >
                  <div class="level is-mobile">
                    <span class="level-left">Manage namespaces</span>
                    <span class="level-right">
                      <button type="button" class="button is-ghost icon" onclick={{action "refreshNamespaceList"}}>
                        <Icon @glyph="refresh-default" class="has-text-grey" />
                      </button>
                    </span>
                  </div>
                </LinkTo>
              </div>
          {{/if}}
        </div>
      </D.content>
    </BasicDropdown>
  </div>
  <div class="navbar-separator"></div>
{{/if}}