{{ define "repo/fragments/cloneDropdown" }}
  {{ $knot := .RepoInfo.Knot }}
  {{ if eq $knot "knot1.tangled.sh" }}
      {{ $knot = "tangled.org" }}
  {{ end }}

  <button 
    popovertarget="clone-dropdown"
    popovertargetaction="toggle"
    class="btn-create cursor-pointer list-none flex items-center gap-2 px-4">
    {{ i "download" "w-4 h-4" }}
    <span class="hidden md:inline">code</span>
  </button>
  <div
    popover
    id="clone-dropdown"
    class="
      bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 
      dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50 
      w-96 p-4 rounded drop-shadow overflow-visible">
    <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-5">Clone this repository</h3>

    <!-- HTTPS Clone -->
    <div class="mb-3">
      <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">HTTPS</label>
      <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
        <code
          class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
          onclick="window.getSelection().selectAllChildren(this)"
          data-url="https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}"
          >https://tangled.org/{{ resolve .RepoInfo.OwnerDid }}/{{ .RepoInfo.Name }}</code>
        <button
          onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
          class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
          title="Copy to clipboard"
          >
          {{ i "copy" "w-4 h-4" }}
        </button>
      </div>
    </div>

    <!-- SSH Clone -->
    <div class="mb-3">
      {{ $repoOwnerHandle := resolve .RepoInfo.OwnerDid }}
      <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">SSH</label>
      <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded">
        <code
          class="flex-1 px-3 py-2 text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-l select-all cursor-pointer whitespace-nowrap overflow-x-auto"
          onclick="window.getSelection().selectAllChildren(this)"
          data-url="git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}"
          >git@{{ $knot | stripPort }}:{{ $repoOwnerHandle }}/{{ .RepoInfo.Name }}</code>
        <button
          onclick="copyToClipboard(this, this.previousElementSibling.getAttribute('data-url'))"
          class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 border-l border-gray-300 dark:border-gray-600"
          title="Copy to clipboard"
          >
          {{ i "copy" "w-4 h-4" }}
        </button>
      </div>
    </div>

    <!-- Note for self-hosted -->
    <p class="text-xs text-gray-500 dark:text-gray-400">
    For self-hosted knots, clone URLs may differ based on your setup.
    </p>

    <!-- Download Archive -->
    <div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700">
      <a
        href="/{{ .RepoInfo.FullName }}/archive/{{ .Ref | urlquery }}"
        class="flex items-center gap-2 px-3 py-2 text-sm"
        >
        {{ i "download" "w-4 h-4" }}
        Download tar.gz
      </a>
    </div>
  </div>

  <script>
    function copyToClipboard(button, text) {
        navigator.clipboard.writeText(text).then(() => {
            const originalContent = button.innerHTML;
            button.innerHTML = `{{ i "check" "w-4 h-4" }}`;
            setTimeout(() => {
                button.innerHTML = originalContent;
            }, 2000);
        });
    }
  </script>
{{ end }}