{{define "content"}}
{{$owner := .Data.Owner}}
{{$repo := .Data.RepoName}}
{{$c := .Data.Commit}}
<div class="row">
  <div class="col-md-12">
    <h2>
      <a href="/~{{$owner}}/{{$repo}}">~{{$owner}}/{{$repo}}</a>:
      <code>{{$c.ShortSHA}}</code>
    </h2>
    <p><strong>{{$c.Subject}}</strong></p>
    {{if $c.Body}}<pre class="commit-body">{{$c.Body}}</pre>{{end}}
    <p class="text-muted">
      {{$c.AuthorName}} &lt;{{$c.AuthorEmail}}&gt; — {{date $c.Date}}
    </p>
    <p class="text-muted">
      Commit <code>{{$c.SHA}}</code> —
      <a href="{{.Data.PatchURL}}">view raw patch</a>
    </p>
    {{if $c.ParentSHAs}}
    <p>
      Parent(s):
      {{range $c.ParentSHAs}}
      <a href="/~{{$owner}}/{{$repo}}/commit/{{.}}"><code>{{shortsha .}}</code></a>
      {{end}}
    </p>
    {{end}}
  </div>
</div>

{{if .Data.IsMerge}}
<div class="alert alert-info">
  This is a merge commit; the diff shown is against its first parent.
</div>
{{end}}

{{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">
    <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>
</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}}
