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

  <!-- PR Header -->
  <div class="mb-4 pb-3" style="border-bottom:1px solid hsl(var(--border));">
    <div class="flex items-start justify-between flex-wrap gap-3">
      <div class="flex items-center gap-2 flex-wrap min-w-0">
        <h1 class="text-lg font-bold" style="margin:0;">{{.PR.Title}}</h1>
        <span class="font-mono text-base text-muted">#{{.PR.Number}}</span>
      </div>

      {{if .CanToggle}}
        {{if ne .PR.Status "merged"}}
          <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/pulls/{{.PR.Number}}/state" style="margin:0;">
            <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
            {{if eq .PR.Status "closed"}}
              <input type="hidden" name="state" value="open">
              <button type="submit" class="btn btn-outline btn-sm">
                {{icon "git-pull-request" "size-3.5"}}
                <span>{{t .Lang "pulls.reopen_btn"}}</span>
              </button>
            {{else}}
              <input type="hidden" name="state" value="closed">
              <button type="submit" class="btn btn-outline btn-sm">
                {{icon "close" "size-3.5"}}
                <span>{{t .Lang "pulls.close_btn"}}</span>
              </button>
            {{end}}
          </form>
        {{end}}
      {{end}}
    </div>

    <div class="flex items-center gap-2 mt-2 text-xs text-muted flex-wrap">
      {{if eq .PR.Status "merged"}}
        <span class="badge badge-primary font-medium flex items-center gap-1.5" style="background:hsl(var(--accent));color:#fff;">
          {{icon "git-merge" "size-3.5"}} {{t .Lang "pulls.status.merged"}}
        </span>
      {{else if eq .PR.Status "closed"}}
        <span class="badge badge-outline flex items-center gap-1.5">
          {{icon "close" "size-3.5"}} {{t .Lang "pulls.status.closed"}}
        </span>
      {{else}}
        <span class="badge badge-primary flex items-center gap-1.5">
          {{icon "git-pull-request" "size-3.5"}} {{t .Lang "pulls.status.open"}}
        </span>
      {{end}}

      <a href="/{{.PR.AuthorUsername}}" class="font-medium" style="color:hsl(var(--foreground));">@{{.PR.AuthorUsername}}</a>
      <span>{{t .Lang "pulls.wants_to_merge"}}</span>
      <span class="badge badge-outline font-mono text-xs">{{if .PR.HeadRepoID}}{{.PR.HeadRepoOwner}}/{{.PR.HeadRepoName}}:{{end}}{{.PR.HeadBranch}}</span>
      <span>{{t .Lang "pulls.into"}}</span>
      <span class="badge badge-outline font-mono text-xs">{{.PR.BaseBranch}}</span>
      <span>·</span>
      <span>{{timeAgo .PR.CreatedAt .Lang}}</span>
    </div>

    <!-- Sub-tabs: Conversation, Commits, Files Changed -->
    <div class="flex items-center gap-2 mt-3 pt-2" style="border-top:1px solid hsl(var(--border));">
      <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/pulls/{{.PR.Number}}?tab=conversation" class="btn {{if eq .SubTab "conversation"}}btn-secondary{{else}}btn-ghost{{end}} btn-sm">
        {{icon "message" "size-3.5"}}
        <span>{{t .Lang "pulls.conversation"}}</span>
      </a>
      <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/pulls/{{.PR.Number}}?tab=commits" class="btn {{if eq .SubTab "commits"}}btn-secondary{{else}}btn-ghost{{end}} btn-sm">
        {{icon "git-commit" "size-3.5"}}
        <span>{{t .Lang "pulls.commits"}} ({{len .CompareCommits}})</span>
      </a>
      <a href="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/pulls/{{.PR.Number}}?tab=files" class="btn {{if eq .SubTab "files"}}btn-secondary{{else}}btn-ghost{{end}} btn-sm">
        {{icon "file-code" "size-3.5"}}
        <span>{{t .Lang "pulls.files_changed"}} {{if .Compare}}({{.Compare.FilesChanged}}){{end}}</span>
      </a>
    </div>
  </div>

  {{if eq .SubTab "commits"}}
    <!-- Commits list -->
    <div class="card mb-4">
      <div class="dense-list">
        {{range .CompareCommits}}
          <div class="dense-row" style="min-height:2.8rem;padding:0.5rem 0.85rem;">
            <div class="flex items-center gap-2 min-w-0">
              <span class="text-muted">{{icon "git-commit" "size-3.5"}}</span>
              <a href="/{{$.Repo.OwnerUsername}}/{{$.Repo.Name}}/commit/{{.Hash}}" class="font-semibold text-sm truncate">{{.Subject}}</a>
            </div>
            <div class="flex items-center gap-2 text-xs text-muted flex-shrink-0 font-mono">
              <span>{{.AuthorName}}</span>
              <span class="badge badge-outline">{{.ShortHash}}</span>
            </div>
          </div>
        {{else}}
          <div class="card-body text-xs text-muted">{{t .Lang "pulls.no_commits"}}</div>
        {{end}}
      </div>
    </div>

  {{else if eq .SubTab "files"}}
    <!-- Files changed diff viewer -->
    {{if .Compare}}
      <div class="flex items-center justify-between mb-3 text-xs text-muted font-mono">
        <span><strong>{{.Compare.FilesChanged}}</strong> {{pluralT .Lang .Compare.FilesChanged "repo.files_changed"}}</span>
        <div class="flex items-center gap-2">
          <span style="color:hsl(var(--diff-add-fg));">+{{.Compare.TotalAdditions}}</span>
          <span style="color:hsl(var(--diff-del-fg));">-{{.Compare.TotalDeletions}}</span>
        </div>
      </div>

      <div class="flex flex-col gap-4">
        {{range .Compare.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>
        {{else}}
          <div class="card p-4 text-xs text-muted">{{t .Lang "pulls.no_changes"}}</div>
        {{end}}
      </div>
    {{end}}

  {{else}}
    <!-- Conversation Tab -->

    <!-- Initial PR Description Card -->
    <div class="card mb-4">
      <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted)/0.3);">
        <div class="flex items-center gap-2">
          {{avatar .PR.AuthorUsername .PR.AuthorAvatar}}
          <a href="/{{.PR.AuthorUsername}}" class="font-semibold">@{{.PR.AuthorUsername}}</a>
          <span class="text-muted">{{timeAgo .PR.CreatedAt .Lang}}</span>
        </div>
      </div>
      <div class="card-body markdown-body">
        {{if .PR.Body}}
          {{renderMD .PR.Body}}
        {{else}}
          <span class="text-xs text-muted">—</span>
        {{end}}
      </div>
    </div>

    <!-- Comments List -->
    {{if .Comments}}
      <div class="flex flex-col gap-3 mb-4">
        {{range .Comments}}
          <div class="card">
            <div class="card-header text-xs" style="padding:0.5rem 0.85rem;background:hsl(var(--muted)/0.2);">
              <div class="flex items-center gap-2">
                {{avatar .AuthorUsername .AuthorAvatar}}
                <a href="/{{.AuthorUsername}}" class="font-semibold">@{{.AuthorUsername}}</a>
                <span class="text-muted">{{timeAgo .CreatedAt $.Lang}}</span>
              </div>
            </div>
            <div class="card-body markdown-body">
              {{renderMD .Body}}
            </div>
          </div>
        {{end}}
      </div>
    {{end}}

    <!-- Merge Box / State Banner -->
    <div class="card mb-4">
      {{if eq .PR.Status "merged"}}
        <div class="card-body flex items-center gap-3" style="background:hsl(var(--muted)/0.2);">
          <span style="color:hsl(var(--accent));">{{icon "git-merge" "size-6"}}</span>
          <div class="flex flex-col gap-0.5">
            <div class="font-semibold text-sm">{{t .Lang "pulls.merged_message"}}</div>
            <div class="text-xs text-muted">
              {{if .PR.MergedByUsername}}
                <span>@{{.PR.MergedByUsername}}</span>
                <span>·</span>
              {{end}}
              {{if .PR.MergedAt}}
                <span>{{formatDate .PR.MergedAt}}</span>
              {{end}}
            </div>
          </div>
        </div>

      {{else if eq .PR.Status "closed"}}
        <div class="card-body flex items-center gap-3" style="background:hsl(var(--muted)/0.2);">
          <span class="text-muted">{{icon "close" "size-6"}}</span>
          <div class="flex flex-col gap-0.5">
            <div class="font-semibold text-sm">{{t .Lang "pulls.closed_message"}}</div>
            <div class="text-xs text-muted">{{t .Lang "pulls.closed_desc"}}</div>
          </div>
        </div>

      {{else}}
        <!-- PR is open -->
        {{if .CanMergeAction}}
          <div class="card-body flex flex-col gap-3" style="background:hsl(var(--muted)/0.15);">
            <div class="flex items-center gap-2 text-sm font-semibold" style="color:hsl(var(--diff-add-fg));">
              {{icon "check" "size-5"}}
              <span>{{t .Lang "pulls.able_to_merge"}}</span>
            </div>
            <div class="text-xs text-muted">{{t .Lang "pulls.merge_clean"}}</div>
            <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/pulls/{{.PR.Number}}/merge" class="flex items-center gap-2">
              <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
              <button type="submit" class="btn btn-primary btn-sm">
                {{icon "git-merge" "size-3.5"}}
                <span>{{t .Lang "pulls.merge_btn"}}</span>
              </button>
            </form>
          </div>
        {{else if not .CanMerge}}
          <div class="card-body flex items-center gap-3" style="background:hsl(var(--muted)/0.15);">
            <span style="color:hsl(var(--diff-del-fg));">{{icon "alert-circle" "size-5"}}</span>
            <div class="flex flex-col gap-0.5">
              <div class="font-semibold text-sm" style="color:hsl(var(--diff-del-fg));">{{t .Lang "pulls.conflicts_title"}}</div>
              <div class="text-xs text-muted">{{t .Lang "pulls.conflicts_desc"}}</div>
            </div>
          </div>
        {{else}}
          <div class="card-body flex items-center gap-2 text-xs text-muted" style="background:hsl(var(--muted)/0.15);">
            {{icon "check" "size-4"}}
            <span>{{t .Lang "pulls.only_write_merge"}}</span>
          </div>
        {{end}}
      {{end}}
    </div>

    <!-- Reviews Panel -->
    {{if or .Reviews .CanReview}}
      <div class="card mb-4">
        <div class="card-header" style="padding:0.55rem 0.85rem;">
          <span class="font-semibold text-xs flex items-center gap-2">
            {{icon "shield" "size-4"}}
            <span>{{t .Lang "reviews.title"}}</span>
            {{if gt .ApprovedCount 0}}<span class="badge" style="padding:0 0.35rem;font-size:0.68rem;color:hsl(var(--diff-add-fg));">{{.ApprovedCount}} ✓</span>{{end}}
            {{if gt .ChangesRequestedCount 0}}<span class="badge" style="padding:0 0.35rem;font-size:0.68rem;color:hsl(var(--diff-del-fg));">{{.ChangesRequestedCount}} ✗</span>{{end}}
          </span>
        </div>
        {{if .Reviews}}
          <div class="dense-list">
            {{range .Reviews}}
              <div class="dense-row" style="min-height:2.5rem;padding:0.45rem 0.85rem;">
                <div class="flex items-center gap-2 min-w-0">
                  {{avatar .ReviewerUsername .ReviewerAvatar}}
                  <a href="/{{.ReviewerUsername}}" class="font-semibold text-sm">@{{.ReviewerUsername}}</a>
                  {{if eq .State "approved"}}
                    <span class="flex items-center gap-1 text-xs font-medium" style="color:hsl(var(--diff-add-fg));">{{icon "check" "size-3.5"}} {{t $.Lang "reviews.approved"}}</span>
                  {{else}}
                    <span class="flex items-center gap-1 text-xs font-medium" style="color:hsl(var(--diff-del-fg));">{{icon "alert-circle" "size-3.5"}} {{t $.Lang "reviews.changes_requested"}}</span>
                  {{end}}
                </div>
                <div class="flex items-center gap-2 text-xs text-muted">
                  {{if .Body}}<span class="truncate" style="max-width:22rem;">{{.Body}}</span>{{end}}
                  <span>{{timeAgo .UpdatedAt $.Lang}}</span>
                </div>
              </div>
            {{end}}
          </div>
        {{end}}
        {{if .CanReview}}
          <div class="card-body" style="border-top:1px solid hsl(var(--border));">
            <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/pulls/{{.PR.Number}}/review" class="flex flex-col gap-2.5">
              <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
              <textarea name="body" class="textarea" rows="2" placeholder="{{t .Lang "reviews.body_ph"}}" maxlength="10000"></textarea>
              <div class="flex items-center gap-2 justify-end">
                <button type="submit" name="state" value="changes_requested" class="btn btn-outline btn-sm">
                  {{icon "alert-circle" "size-3.5"}}
                  <span>{{t .Lang "reviews.request_changes"}}</span>
                </button>
                <button type="submit" name="state" value="approved" class="btn btn-primary btn-sm">
                  {{icon "check" "size-3.5"}}
                  <span>{{t .Lang "reviews.approve"}}</span>
                </button>
              </div>
            </form>
          </div>
        {{end}}
      </div>
    {{end}}

    <!-- Add Comment Form -->    {{if .CurrentUser}}
      <div class="card">
        <form method="post" action="/{{.Repo.OwnerUsername}}/{{.Repo.Name}}/pulls/{{.PR.Number}}/comments" class="card-body flex flex-col gap-2.5">
          <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
          <textarea name="body" class="textarea" rows="4" placeholder="{{t .Lang "pulls.comment_ph"}}" required maxlength="20000"></textarea>
          <div class="flex items-center justify-end">
            <button type="submit" class="btn btn-primary btn-sm">
              {{icon "message" "size-3.5"}}
              <span>{{t .Lang "pulls.comment_btn"}}</span>
            </button>
          </div>
        </form>
      </div>
    {{end}}

  {{end}}
</div>
{{end}}