{{ define "repo/fragments/pullPatchDropdown" }}
  {{ $patchRelPath := printf "/%s/pulls/%d/round/%d.patch" .RepoInfo.FullName .Pull.PullId .ActiveRound }}
  {{ $patchUrl := printf "https://tangled.org%s" $patchRelPath }}
  <button
    popovertarget="pull-patch"
    popovertargetaction="toggle"
    class="btn font-normal normal-case flex items-center gap-2 cursor-pointer">
    {{ i "download" "w-4 h-4" }}
    <span class="hidden md:inline">Patch</span>
  </button>
  <div
    popover
    id="pull-patch"
    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 md:w-[440px] p-4 rounded drop-shadow overflow-visible">

    <div class="flex items-center justify-between mb-3">
      <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Apply this patch</h3>
      <button
        popovertarget="pull-patch"
        popovertargetaction="hide"
        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
        {{ i "x" "w-4 h-4" }}
      </button>
    </div>

    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 normal-case">Patch URL</label>
    <div class="flex items-stretch border border-gray-300 dark:border-gray-600 divide-x divide-gray-300 dark:divide-gray-600 rounded">
      <span
        id="pull-patch-url"
        class="flex-1 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 select-all cursor-pointer whitespace-nowrap overflow-x-auto font-mono bg-gray-200 dark:bg-gray-700"
        onclick="window.getSelection().selectAllChildren(this)"
      >{{ $patchUrl }}</span>
      <button
        onclick="copyToClipboard(this, document.getElementById('pull-patch-url').textContent)"
        class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
        title="Copy to clipboard"
      >
        {{ i "copy" "w-4 h-4" }}
      </button>
    </div>

    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 mt-3 normal-case">Apply locally</label>
    <div class="flex items-stretch border border-gray-300 dark:border-gray-600 divide-x divide-gray-300 dark:divide-gray-600 rounded">
      <span
        id="pull-patch-cmd"
        class="flex-1 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 select-all cursor-pointer whitespace-nowrap overflow-x-auto font-mono bg-gray-200 dark:bg-gray-700"
        onclick="window.getSelection().selectAllChildren(this)"
      >curl {{ $patchUrl }} | git am</span>
      <button
        onclick="copyToClipboard(this, document.getElementById('pull-patch-cmd').textContent)"
        class="px-3 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
        title="Copy to clipboard"
      >
        {{ i "copy" "w-4 h-4" }}
      </button>
    </div>

    <div class="flex gap-2 mt-4">
      <a
        href="{{ $patchRelPath }}"
        class="btn flex-1 flex items-center justify-center gap-2"
        download
      >
        {{ i "download" "w-4 h-4" }}
        Download .patch
      </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 }}