{{define "content"}}
{{$owner := .Data.Owner}}
{{$repo := .Data.RepoName}}
{{$sep := "..."}}{{if not .Data.Spec.ThreeDot}}{{$sep = ".."}}{{end}}
<div class="row">
  <div class="col-md-12">
    <h2>
      <a href="/~{{$owner}}/{{$repo}}">~{{$owner}}/{{$repo}}</a>:
      <code>{{.Data.Spec.Base}}</code>{{$sep}}<code>{{.Data.Spec.Head}}</code>
    </h2>
    <p class="text-muted">
      {{if .Data.Spec.ThreeDot}}
      Three-dot comparison (symmetric difference from the merge base).
      {{if .Data.MergeBase}}Merge base: <code>{{shortsha .Data.MergeBase}}</code>.{{end}}
      {{else}}
      Two-dot comparison (direct range <code>{{.Data.Spec.Base}}..{{.Data.Spec.Head}}</code>).
      {{end}}
    </p>
  </div>
</div>

{{if .Data.Truncated}}
<div class="alert alert-warning compare-truncated">
  This diff is too large to render in full.
  <a href="{{.Data.PatchURL}}">Download the raw patch</a> to see everything.
</div>
{{end}}

<div class="row">
  <div class="col-md-12">
    <details open>
      <summary>{{len .Data.Commits}} commit(s)</summary>
      <ul class="list-unstyled">
        {{range .Data.Commits}}
        <li>
          <a href="/~{{$owner}}/{{$repo}}/commit/{{.SHA}}"><code>{{.ShortSHA}}</code></a>
          {{.Subject}}
          <span class="text-muted">— {{.AuthorName}}, {{date .Date}}</span>
        </li>
        {{end}}
      </ul>
    </details>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <h3>{{len .Data.Files}} changed file(s)</h3>
    <table class="table">
      <thead>
        <tr><th>File</th><th>Status</th><th>+</th><th>&minus;</th></tr>
      </thead>
      <tbody>
        {{range .Data.Files}}
        <tr>
          <td>
            {{if and .OldPath (ne .OldPath .Path)}}<code>{{.OldPath}}</code> → {{end}}<code>{{.Path}}</code>
            {{if .Binary}}<span class="badge badge-secondary">BIN</span>{{end}}
          </td>
          <td><span class="diff-status diff-status-{{statusClass .Status}}" title="{{statusLabel .Status}}">{{.Status}}</span></td>
          <td class="text-success">{{if .Additions}}+{{.Additions}}{{end}}</td>
          <td class="text-danger">{{if .Deletions}}-{{.Deletions}}{{end}}</td>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>
</div>

<div class="diff-layout-toggle">
  <button type="button" data-diff-layout="split">Split</button>
  <button type="button" data-diff-layout="stacked">Unified</button>
  <button type="button" data-diff-wrap aria-pressed="false">Wrap long lines</button>
</div>
<div id="compare-app">
  <div id="tree-root"></div>
  <div id="diff-root"></div>
</div>
<script id="compare-data" type="application/json">{{.Data.JSON}}</script>
{{end}}

{{define "scripts"}}
<script type="module" src="{{.BundleHref}}"></script>
{{end}}