{{ define "repo/pulls/fragments/composediff" }}
<style>
  #composeFilesToggle:checked ~ * label[for="composeFilesToggle"] .show-text { display: none; }
  #composeFilesToggle:checked ~ * label[for="composeFilesToggle"] .hide-text { display: inline; }
  #composeFilesToggle:not(:checked) ~ * label[for="composeFilesToggle"] .hide-text { display: none; }
  #composeFilesToggle:checked ~ * div#composeFiles { width: fit-content; max-width: 15vw; }
  #composeFilesToggle:not(:checked) ~ * div#composeFiles { width: 0; display: none; margin-right: 0; }
</style>
<div id="diff-area">
  <input type="checkbox" id="composeFilesToggle" class="peer/collapse hidden"/>
  <div class="bg-slate-100 dark:bg-gray-700/50 flex items-center gap-2 h-12 p-2 rounded-t-md border border-b-0 border-gray-200 dark:border-gray-700">
    <label title="Toggle filetree panel" for="composeFilesToggle" class="hidden md:inline-flex btn-flat">
      <span class="peer-checked:hidden">{{ i "panel-left-open" "size-4" }}</span>
      <span class="peer-checked:inline hidden">{{ i "panel-left-close" "size-4" }}</span>
    </label>

    {{ template "repo/fragments/diffStatPill" .Stats }}
    {{ $count := .Stats.FilesChanged }}
    <span class="text-xs text-gray-600 dark:text-gray-300 hidden md:inline-flex">{{ $count }} changed file{{ if ne $count 1 }}s{{ end }}</span>

    <div class="flex-grow"></div>

    <label title="Expand/Collapse diffs" class="btn font-normal normal-case">
      <input type="checkbox" id="diff-collapse-toggle" class="peer/collapse hidden"/>
      <span class="peer-checked/collapse:hidden inline-flex items-center gap-2">
        {{ i "unfold-vertical" "size-4" }}
        <span class="hidden md:inline">Expand all</span>
      </span>
      <span class="peer-checked/collapse:inline-flex hidden items-center gap-2">
        {{ i "fold-vertical" "size-4" }}
        <span class="hidden md:inline">Collapse all</span>
      </span>
    </label>

    <!-- diff settings -->
    {{ template "repo/pulls/fragments/diffSettings"
      (dict "DiffUrl" (printf "%s?repo=%s&base=%s&head=%s" .Repo .DiffUrl .DiffBase .DiffHead)
            "Unified" .Unified) }}

  </div>
  <div class="flex border border-gray-200 dark:border-gray-700 rounded-b-md">
    <div id="composeFiles" class="hidden md:block overflow-hidden p-1 max-h-full overflow-y-auto border-r border-gray-200 dark:border-gray-700">
      {{ template "repo/fragments/fileTree" .FileTree }}
    </div>
    <div id="diff-list" class="flex-1 min-w-0 p-2 space-y-3">
      {{ range .Files }}
        {{ template "repo/pulls/fragments/diffFile" . }}
      {{ end }}
    </div>
  </div>
</div>
<script>
  (() => {
    const checkbox = document.getElementById('diff-collapse-toggle');
    const diffList = document.getElementById('diff-list');

    checkbox.addEventListener('change', () => {
      console.debug("checked", checkbox.checked);
      diffList.querySelectorAll('details[id^="file-"]').forEach(detail => {
        detail.open = checkbox.checked;
      });
    });

    if (window.__collapseToggleHandler) {
      diffList.removeEventListener('toggle', window.__collapseToggleHandler, true);
    }

    const handler = (e) => {
      if (!e.target.matches('details[id^="file-"]')) return;
      const details = document.querySelectorAll('details[id^="file-"]');
      const allOpen = Array.from(details).every(d => d.open);
      const allClosed = Array.from(details).every(d => !d.open);

      if (allOpen) checkbox.checked = true;
      else if (allClosed) checkbox.checked = false;
    };

    console.log("diffList", diffList);

    window.__collapseToggleHandler = handler;
    diffList.addEventListener('toggle', handler, true);
  })();
</script>
{{ end }}