{{#hover-dropdown
  horizontalPosition="left"
  verticalPosition="below"
  renderInPlace=true
  onOpen=(action "onOpen")
  onClose=(action "onClose") as |dd|
}}
  <dd.Trigger aria-label={{t "nav.projectDropdown.label"}}>
    <a
      role="button"
      aria-haspopup="true"
      class="{{if twoLine "two-line "}}text-white nav-link"
    >
      {{#if (eq pageScope "project")}}
        <div class="clip">
          <span>
            {{project.cluster.displayName}}
          </span>
        </div>
        <div class="clip">
          <span>
            {{project.displayName}}
          </span>
        </div>
      {{else if (eq pageScope "cluster")}}
        <div class="clip">
          <span>
            {{cluster.displayName}}
          </span>
        </div>
      {{else if (eq pageScope "global")}}
        <div class="clip">
          <span>
            {{t "nav.admin.tab"}}
          </span>
        </div>
      {{else}}
        <div class="clip">
          <span>
            {{pageScope}}
          </span>
        </div>
      {{/if}}
      <span class="sr-only">
        {{t "nav.srToggleDropdown"}}
      </span>
      <i class="icon icon-chevron-down chevron"></i>
    </a>
  </dd.Trigger>
  <dd.Content class="project-menu" style={{menuStyle}}>
    <div class="global">
      <ul class="list-unstyled">
        <li
          class="item clip
            {{if (eq pageScope "global") "active selected" "inactive"}}"
        >
          <a
            href="{{href-to "global-admin"}}"
            class="{{if (eq pageScope "global") "active selected" "inactive"}}"
          >
            {{t "nav.admin.tab"}}
          </a>
        </li>
      </ul>
    </div>
    <div class="search">
      {{input
        type="text"
        placeholder=(t "nav.projectDropdown.search")
        value=searchInput
      }}
    </div>
    <div class="clusters">
      <label class="acc-label">
        {{t "nav.projectDropdown.clusters"}}
      </label>
      <ul
        class="list-unstyled {{if (eq hoverEntry null) "no-hover-entry"}}"
        style="{{columnStyle}}"
      >
        {{#if searchInput}}
          {{#each clusterSearchResults as |entry|}}
            <li
              data-cluster-id="{{entry.cluster.id}}"
              class="item clip cluster"
            >
              {{#link-to "authenticated.cluster" entry.cluster.id class="top"}}
                {{entry.searchMatch}}
              {{/link-to}}
              <p class="state">
                {{entry.cluster.displayState}}
              </p>
            </li>
          {{else}}
            <li class="text-muted p-10">
              {{t "nav.projectDropdown.clustersNoMatch" searchInput=searchInput
              }}
            </li>
          {{/each}}
        {{else}}
          {{#each byCluster as |entry|}}
            <li
              data-cluster-id={{entry.cluster.id}}
              class="item clip cluster
                {{if entry.active "active" "inactive"}}

                {{if (eq hoverEntry entry) "hover"}}"
            >
              {{#link-to "authenticated.cluster" entry.cluster.id class="top"}}
                {{entry.cluster.displayName}}
              {{/link-to}}
              <p class="state">
                {{entry.cluster.displayState}}
              </p>
            </li>
          {{else}}
            <li class="text-muted p-10">
              {{t "nav.projectDropdown.clustersNoData"}}
            </li>
          {{/each}}
        {{/if}}
      </ul>
    </div>
    <div class="projects">
      {{#if (or searchInput (not clusterEntry))}}
        <label class="acc-label">
          {{t "nav.projectDropdown.projects"}}
        </label>
      {{else}}
        <label class="acc-label">
          {{t
            "nav.projectDropdown.projectsIn"
            cluster=clusterEntry.cluster.displayName
          }}
        </label>
      {{/if}}
      <ul class="list-unstyled" style="{{columnStyle}}">
        {{#if searchInput}}
          {{#each projectSearchResults as |entry|}}
            <li
              class="item clip project
                {{unless entry.project.isReady "not-ready"}}"
            >
              {{#link-to "authenticated.project" entry.project.id class="top"}}
                {{entry.searchMatch}}
              {{/link-to}}
              <p class="state">
                {{t
                  "nav.projectDropdown.projectInCluster"
                  cluster=entry.cluster.displayName
                }}
                {{#unless entry.project.isReady}}
                  ,{{t "nav.projectDropdown.projectNotReady"}}
                {{/unless}}
              </p>
            </li>
          {{else}}
            <li class="text-muted p-10">
              {{t "nav.projectDropdown.projectsNoMatch" searchInput=searchInput
              }}
            </li>
          {{/each}}
        {{else if clusterEntry}}
          {{#each clusterEntry.projects as |project|}}
            <li
              data-project-id={{project.id}}
              class="item clip project
                {{unless project.isReady "not-ready"}}

                {{if project.active "active" "inactive"}}"
            >
              {{#link-to "authenticated.project" project.id class="top"}}
                {{project.displayName}}
              {{/link-to}}
              <p class="state">
                {{#if project.isReady}}
                  {{project.displayState}}
                {{else}}
                  {{t "nav.projectDropdown.projectNotReady"}}
                {{/if}}
              </p>
            </li>
          {{else}}
            <li class="text-muted p-10">
              {{t "nav.projectDropdown.projectNoData"}}
            </li>
          {{/each}}
        {{else}}
          <li class="text-muted p-10">
            {{t "nav.projectDropdown.projectsNoData"}}
          </li>
        {{/if}}
      </ul>
    </div>
  </dd.Content>
{{/hover-dropdown}}