{{ define "content" }}
<div class="space-y-6">
    {{ template "gist_header" . }}

    <h2 class="text-xl font-bold leading-tight">{{ .locale.Tr "gist.forks" }}</h2>

    {{ if ne (len .forks) 0 }}
        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            {{ range $gist := .forks }}
            <a href="{{ $.c.ExternalUrl }}/{{ $gist.User.Username }}/{{ $gist.Identifier }}" class="bg-card hover:border-primary flex items-center gap-3 rounded-lg border p-3">
                {{ if not (shouldGenerateAvatar $gist.User $.DisableGravatar) }}
                    <img class="size-10 shrink-0 rounded-md border object-cover" src="{{ avatarUrl $gist.User $.DisableGravatar }}" alt="{{ $gist.User.Username }}" />
                {{ else }}
                    <svg class="size-10 shrink-0 rounded-md border" data-jdenticon-value="{{ $gist.User.Username }}" width="40" height="40"></svg>
                {{ end }}
                <div class="min-w-0">
                    <p class="truncate font-medium">{{ $gist.User.Username }}<span class="text-muted-foreground">/{{ $gist.Title }}</span></p>
                    <p class="text-muted-foreground text-sm">{{ $.locale.Tr "gist.list.forked" }} {{ $gist.CreatedAt | humanTimeDiff }}</p>
                </div>
            </a>
            {{ end }}
        </div>
        {{ template "pagination" . }}
    {{ else }}
        <div class="text-muted-foreground flex flex-col items-center justify-center py-16 text-center">
            <svg class="size-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="6" r="3"/><circle cx="6" cy="6" r="3"/><circle cx="12" cy="18" r="3"/><path d="M6 9v3a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V9M12 15v3"/></svg>
            <h3 class="text-foreground mt-3 text-sm font-medium">{{ .locale.Tr "gist.forks.no" }}</h3>
        </div>
    {{ end }}
</div>
{{ end }}