template.hbs

{{#modal-dialog
  tetherTarget="[data-version-selector]"
  attachment="top right"
  clickOutsideToClose=true
  onClose=(action on-close)
  targetAttachment="bottom right"}}
  <ul class="docs-list-none docs-mt-2 docs-bg-white docs-shadow-md docs-text-xs docs-rounded docs-z-10">
    {{#each sortedVersions as |version|}}
      <li data-test-id="version">
        <a {{action "changeVersion" version}} href="#"
          class={{concat
            "docs-text-black docs-no-underline docs-flex docs-items-center
            docs-px-4 docs-py-3 hover:docs-bg-brand hover:docs-text-white group "
            (if (eq version sortedVersions.firstObject) "docs-rounded-t")
            (if (eq version sortedVersions.lastObject) "docs-rounded-b")
          }}>
          <span class="docs-w-6 flex">
            {{#if (eq version.key currentVersion.key)}}
              {{svg-jar "check" height=16 width=16}}
            {{/if}}
          </span>
          <span class="docs-font-medium">
            {{version.name}}
          </span>

          <span class="docs-ml-auto docs-pl-8 docs-flex docs-items-center docs-opacity-50 group-hover:docs-opacity-100">
            {{#if (or (eq version.key latestVersionName) (eq version.key primaryBranch))}}
              {{svg-jar (if version.tag "git-tag" "git-sha") height=16 width=16}}
            {{else}}
              {{svg-jar "git-sha" height=16 width=16}}
            {{/if}}

            <span class="docs-text-xxs docs-font-mono docs-pl-1">
              {{#if (or (eq version.key latestVersionName) (eq version.key primaryBranch))}}
                {{#if version.tag}}
                  {{version.tag}}
                {{else}}
                  {{version.truncatedSha}}
                {{/if}}
              {{else}}
                {{version.truncatedSha}}
              {{/if}}
            </span>
          </span>
        </a>
      </li>
    {{/each}}
  </ul>
{{/modal-dialog}}