{{define "content"}}
<div class="container">
  {{template "repo_header" .}}

  <div class="card mb-4">
    <div class="card-header flex items-center justify-between flex-wrap gap-2">
      <div class="flex items-center gap-2 min-w-0">
        {{icon "git-commit" "size-4"}}
        <h1 class="text-base font-semibold truncate" style="margin:0;">{{.Detail.Commit.Subject}}</h1>
      </div>
      <div class="flex items-center gap-1.5 font-mono text-xs">
        <span class="badge badge-outline">{{.Detail.Commit.ShortHash}}</span>
        <button type="button" class="btn btn-ghost btn-icon" style="width:1.7rem;height:1.7rem;" data-copy="{{.Detail.Commit.Hash}}" aria-label="{{t .Lang "common.copy"}}">
          {{icon "copy" "size-3.5"}}
        </button>
        <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/tree/{{.Detail.Commit.Hash}}" class="btn btn-outline btn-sm">{{t .Lang "repo.browse_at_commit"}}</a>
      </div>
    </div>

    {{if .Detail.Commit.Body}}
      <div class="card-body" style="border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/0.25);">
        <pre class="font-mono text-xs" style="margin:0;white-space:pre-wrap;">{{.Detail.Commit.Body}}</pre>
      </div>
    {{end}}

    <div class="card-body flex items-center justify-between flex-wrap gap-3 text-xs text-muted" style="padding:0.6rem 0.9rem;">
      <div class="flex items-center gap-2">
        <span class="avatar" style="width:1.35rem;height:1.35rem;font-size:0.62rem;">{{avatarInitial .Detail.Commit.AuthorName}}</span>
        <span class="font-medium" style="color:hsl(var(--foreground));">{{.Detail.Commit.AuthorName}}</span>
        <span>·</span>
        <span>{{formatDate .Detail.Commit.AuthoredAt}}</span>
      </div>

      <div class="flex items-center gap-3 font-mono">
        <span><strong>{{.Detail.FilesChanged}}</strong> {{pluralT .Lang .Detail.FilesChanged "repo.files_changed"}}</span>
        <span style="color:hsl(var(--diff-add-fg));">+{{.Detail.TotalAdditions}}</span>
        <span style="color:hsl(var(--diff-del-fg));">-{{.Detail.TotalDeletions}}</span>
      </div>
    </div>
  </div>

  <div class="flex flex-col gap-4">
    {{range .Detail.Files}}
      <section class="card">
        <div class="card-header" style="padding:0.5rem 0.8rem;">
          <div class="flex items-center gap-2 font-mono text-xs min-w-0">
            {{icon "file-code" "size-4"}}
            {{if eq .Status "renamed"}}
              <span>{{.OldPath}} → <strong>{{.NewPath}}</strong></span>
            {{else}}
              <strong>{{.NewPath}}</strong>
            {{end}}
          </div>
          <div class="flex items-center gap-2 font-mono text-xs">
            <span style="color:hsl(var(--diff-add-fg));">+{{.Additions}}</span>
            <span style="color:hsl(var(--diff-del-fg));">-{{.Deletions}}</span>
          </div>
        </div>

        {{if .IsBinary}}
          <div class="card-body text-xs text-muted">{{t $.Lang "repo.binary_notice"}}</div>
        {{else}}
          <div style="overflow-x:auto;">
            <table class="diff-table">
              <tbody>
                {{range .Lines}}
                  {{if eq .Type "hunk"}}
                    <tr class="diff-row-hunk">
                      <td class="diff-num">...</td>
                      <td class="diff-num">...</td>
                      <td class="diff-code">{{.Content}}</td>
                    </tr>
                  {{else if eq .Type "add"}}
                    <tr class="diff-row-add">
                      <td class="diff-num"></td>
                      <td class="diff-num">{{.NewNum}}</td>
                      <td class="diff-code">+{{.Content}}</td>
                    </tr>
                  {{else if eq .Type "del"}}
                    <tr class="diff-row-del">
                      <td class="diff-num">{{.OldNum}}</td>
                      <td class="diff-num"></td>
                      <td class="diff-code">-{{.Content}}</td>
                    </tr>
                  {{else}}
                    <tr>
                      <td class="diff-num">{{.OldNum}}</td>
                      <td class="diff-num">{{.NewNum}}</td>
                      <td class="diff-code"> {{.Content}}</td>
                    </tr>
                  {{end}}
                {{end}}
              </tbody>
            </table>
          </div>
        {{end}}
      </section>
    {{end}}
  </div>
</div>
{{end}}