{{#if (and (not this.accessibleNamespaces.length) this.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
        @htmlTag="button"
        class="button is-transparent namespace-picker-trigger has-current-color"
        data-test-namespace-toggle
      >
        {{yield}}
        {{#if this.namespaceDisplay}}
          <span class="namespace-name">{{this.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 this.isUserRootNamespace}}
            <NamespaceLink
              @targetNamespace={{or
                (object-at (dec 2 this.menuLeaves.length) this.lastMenuLeaves)
                this.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 this.namespacePath (concat this.namespacePath "/") "root"}}
                </span>
                <span class="level-right">
                  <Icon @name="check-circle" class="has-text-success" />
                </span>
              </div>
            </header>
          </div>
        </div>
        <div class="namespace-list {{if this.isAnimating "animated-list"}}">
          <div class="is-mobile level-left">
            {{#unless this.isUserRootNamespace}}
              <NamespaceLink
                @targetNamespace={{or
                  (object-at (dec 2 this.menuLeaves.length) this.lastMenuLeaves)
                  this.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 "" this.lastMenuLeaves)}}
            {{! leaf is '' which is the root namespace, and then we need to iterate the root leaves }}
            <div class="leaf-panel {{if (eq "" this.currentLeaf) "leaf-panel-current" "leaf-panel-left"}} ">
              {{~#each this.rootLeaves as |rootLeaf|}}
                <NamespaceLink @targetNamespace={{rootLeaf}} @class="namespace-link" @showLastSegment={{true}} />
              {{/each~}}
            </div>
          {{/if}}
          {{#each this.lastMenuLeaves as |leaf|}}
            <div
              class="leaf-panel
                {{if (eq leaf this.currentLeaf) "leaf-panel-current" "leaf-panel-left"}}
                {{if (and this.isAdding (eq leaf this.changedLeaf)) "leaf-panel-adding"}}
                {{if (and (not this.isAdding) (eq leaf this.changedLeaf)) "leaf-panel-exiting"}}
                "
            >
              {{~#each-in (get this.namespaceTree leaf) as |leafName|}}
                <NamespaceLink
                  @targetNamespace={{concat leaf "/" leafName}}
                  @class="namespace-link"
                  @showLastSegment={{true}}
                />
              {{/each-in~}}
            </div>
          {{/each}}
          {{#if this.canList}}
            <div class="leaf-panel leaf-panel-current">
              <LinkTo @route="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 @name="reload" class="has-text-grey" />
                    </button>
                  </span>
                </div>
              </LinkTo>
            </div>
          {{/if}}
        </div>
      </D.Content>
    </BasicDropdown>
  </div>
  <div class="navbar-separator"></div>
{{/if}}