{{#hover-dropdown
     horizontalPosition="left"
     as |dd|
}}

  {{#dd.trigger
       ariaLabel=(t 'nav.environment.cluster')
  }}

    <a class="{{if twoLine 'two-line'}} text-white">
      {{#if (eq pageScope "project")}}
        <div class="clip">
          <span>{{project.cluster.displayName}}</span>
          <i class="icon icon-cluster icon-fw"></i>
        </div>
        <div class="pl-15 clip text-muted">
          <span>{{project.displayName}}</span>
          <i class="{{project.icon}} project-icon icon-fw"></i>
        </div>
      {{else if (eq pageScope "cluster")}}
        <div class="clip">
          <span>{{cluster.displayName}}</span>
          <i class="icon icon-cluster icon-fw"></i>
        </div>
      {{else if (eq pageScope "clusters")}}
        <div class="clip">
          <span>{{t 'nav.environment.manage'}}</span>
        </div>
      {{else if (eq pageScope "global")}}
        <div class="clip">
          <span>{{t 'nav.admin.tab'}}</span>
          <i class="icon icon-globe icon-fw"></i>
        </div>
      {{else}}
        <div class="clip">
          <span>{{pageScope}}</span>
          <i class="icon icon-question icon-fw"></i>
        </div>
      {{/if}}

      <span class="sr-only">{{t 'nav.srToggleDropdown'}}</span>
      <i class="icon icon-chevron-down chevron"></i>

    </a>

  {{/dd.trigger}}

  {{#dd.content
       class="cluster-menu"
  }}

    <li class="header {{if (eq pageScope "global") 'active selected' 'inactive'}}">
      <a href="{{href-to "global-admin"}}">
       <span>{{t 'nav.admin.tab'}}</span>
       <i class="icon icon-globe icon-fw"></i>
      </a>
    </li>
    <li role="presentation" class="divider"></li>

    {{#each byCluster as |entry idx|}}

      {{#if (gt idx 0)}}
        <li role="presentation" class="divider"></li>
      {{/if}}

      <li class="header {{if entry.active (if (eq pageScope 'cluster') 'active selected') 'inactive'}}">
        {{#link-to 'authenticated.cluster' entry.cluster.id}}
          <span>{{t 'generic.cluster'}}: {{entry.cluster.displayName}}</span>
          <i class="icon icon-cluster icon-fw"></i>
        {{/link-to}}
      </li>

      {{#if entry.cluster.isReady}}

        {{#each entry.projects as |p|}}

          <li class="{{if (and (eq pageScope "project") p.active) 'active selected' (unless entry.active 'inactive')}} subitem text-muted">
            {{#link-to 'authenticated.project' p.id class="clip project-link"}}
              <span>{{p.displayName}}</span>
              <i class="icon {{p.icon}} icon-fw"></i>
            {{/link-to}}
          </li>

        {{/each}}

      {{else}}

        <p class="text-small text-muted m-0 p-0 pl-50">{{entry.cluster.displayState}}</p>

      {{/if}}

    {{/each}}

    {{#if projectIsMissing}}

      <li role="presentation" class="divider"></li>
      <li role="presentation" class="dropdown-header">{{t 'nav.environment.selected'}}</li>
      <li class="{{if (and (eq pageScope "project") project.active) 'active selected'}}">
        <a href="#" {{action "switchProject" project}} class="clip">
          <i class="icon {{project.icon}}"></i>
          &nbsp;
          {{project.displayName}}
        </a>
      </li>

    {{/if}}

  {{/dd.content}}

{{/hover-dropdown}}