<DocsModalDialog
  @tetherTarget="[data-version-selector]"
  @attachment="top right"
  @clickOutsideToClose={{true}}
  @onClose={{@onClose}}
  @targetAttachment="bottom right"
  ...attributes
>
  <ul
    class="docs-mt-2 docs-bg-white docs-shadow-md docs-text-xs docs-rounded docs-z-10"
  >
    {{#each this.sortedVersions as |version index|}}
      <li data-test-id="version">
        <a
          {{on "click" (fn this.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 index 0) "docs-rounded-t")
            (if (eq version this.lastVersion) "docs-rounded-b")
          }}
        >
          <span class="flex docs-w-6">
            {{#if (eq version.key this.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 this.config.latestVersionName)
                (eq version.key this.config.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 this.config.latestVersionName)
                  (eq version.key this.config.primaryBranch)
                )
              }}
                {{#if version.tag}}
                  {{version.tag}}
                {{else}}
                  {{version.truncatedSha}}
                {{/if}}
              {{else}}
                {{version.truncatedSha}}
              {{/if}}
            </span>
          </span>
        </a>
      </li>
    {{/each}}
  </ul>
</DocsModalDialog>