{{ define "repo/fragments/diffOpts" }}
  {{ $active := "unified" }}
  {{ if .Split }}
    {{ $active = "split" }}
  {{ end }}

  {{ $usePost := ne .RefreshUrl "" }}
  {{ $target := .Target }}
  {{ if eq $target "" }}{{ $target = "#diff-files" }}{{ end }}
  {{ $field := .Field }}
  {{ if eq $field "" }}{{ $field = "diff" }}{{ end }}

  <div class="btn-group"
       hx-on::before-request="const t=event.target.closest('button');if(!t||t.classList.contains('active'))return event.preventDefault();this.querySelectorAll('button').forEach(b=>b.classList.toggle('active',b===t))">
    <button
       {{ if $usePost }}
       hx-post="{{ .RefreshUrl }}"
       hx-vals='{"{{ $field }}":"unified"}'
       hx-include="closest form"
       {{ else }}
       hx-get="?{{ $field }}=unified"
       hx-push-url="true"
       {{ end }}
       hx-target="{{ $target }}"
       hx-select="{{ $target }}"
       hx-swap="outerHTML"
       hx-indicator="this"
       class="group btn-group-item {{ if eq $active "unified" }}active{{ end }}">
      {{ i "square-split-vertical" "size-4 inline group-[.htmx-request]:hidden" }}
      {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
      Unified
    </button>
    <button
       {{ if $usePost }}
       hx-post="{{ .RefreshUrl }}"
       hx-vals='{"{{ $field }}":"split"}'
       hx-include="closest form"
       {{ else }}
       hx-get="?{{ $field }}=split"
       hx-push-url="true"
       {{ end }}
       hx-target="{{ $target }}"
       hx-select="{{ $target }}"
       hx-swap="outerHTML"
       hx-indicator="this"
       class="group btn-group-item {{ if eq $active "split" }}active{{ end }}">
      {{ i "square-split-horizontal" "size-4 inline group-[.htmx-request]:hidden" }}
      {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
      Split
    </button>
  </div>
{{ end }}