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

  <div class="card mb-4">
    <div class="card-header">
      <span class="font-semibold flex items-center gap-2">{{icon "git-branch" "size-4"}} {{t .Lang "forks.title"}}</span>
      <span class="text-xs text-muted font-mono">{{.Repo.OwnerUsername}}/{{.Repo.Name}}</span>
    </div>

    {{if .Upstream}}
      <div class="card-body text-xs text-muted flex items-center gap-1.5" style="border-bottom:1px solid hsl(var(--border));">
        {{icon "git-branch" "size-3.5"}}
        {{t .Lang "fork.forked_from"}}
        <a class="font-medium" style="color:hsl(var(--foreground));" href="/{{.Upstream.Owner}}/{{.Upstream.Name}}">{{.Upstream.Owner}}/{{.Upstream.Name}}</a>
      </div>
    {{end}}

    <div class="dense-list">
      {{range .Forks}}
        <div class="dense-row" style="min-height:3rem;padding:0.55rem 0.85rem;">
          <div class="flex items-center gap-2.5 min-w-0">
            {{avatar .OwnerUsername .OwnerAvatarURL}}
            <div class="min-w-0">
              <a href="/{{.OwnerUsername}}/{{.Name}}" class="font-semibold text-sm">{{.OwnerUsername}}/{{.Name}}</a>
              {{if .Description}}
                <div class="text-xs text-muted truncate">{{.Description}}</div>
              {{end}}
            </div>
          </div>
          <div class="flex items-center gap-3 text-xs text-muted">
            <span>{{timeAgo .UpdatedAt $.Lang}}</span>
            {{if $.CurrentUser}}
              {{if eq .OwnerID $.CurrentUser.ID}}
                <span class="badge badge-outline">{{t $.Lang "fork.your_fork"}}</span>
              {{end}}
            {{end}}
          </div>
        </div>
      {{else}}
        <div class="card-body text-sm text-muted">{{t .Lang "forks.empty"}}</div>
      {{end}}
    </div>
  </div>
</div>
{{end}}