{{ define "timeline/fragments/trending" }}
  <div class="border border border-gray-200 dark:border-gray-700 rounded-sm divide-y divide-gray-200 dark:divide-gray-700">
    <h3 class="text-base dark:text-white flex items-center gap-2 px-4 py-2 bg-white/50 dark:bg-gray-800/50">
      {{ i "trending-up" "size-4 flex-shrink-0" }}
      Trending
    </h3>
    {{ if .Repos }}
    <div class="w-full py-1 bg-white dark:bg-gray-800">
      {{ range $index, $repo := .Repos }}
        {{ template "singleLineRepo" (list $ $repo) }}
      {{ end }}
    </div>
    {{ else }}
    <div class="p-6 text-sm text-gray-500 dark:text-gray-400 text-center">
      No trending repositories this week
    </div>
    {{ end }}
  </div>
{{ end }}

{{ define "singleLineRepo" }}
  {{ $root := index . 0 }}
  {{ $repo := index . 1 }}
  {{ with $repo }}
    {{ $repoOwner := resolve .Did }}
    {{/* a real anchor per row: a stretched (absolute inset-0) link inside a
         position:relative table row breaks hit-testing on safari, which does
         not support positioned table rows as containing blocks */}}
    <a href="/{{ $repoOwner }}/{{ .Slug }}"
       class="grid grid-cols-[3.5rem_minmax(0,1fr)_auto] gap-x-4 px-4 py-3 no-underline hover:no-underline hover:bg-gray-100/50 dark:hover:bg-gray-700/50">
      <div class="flex text-sm items-start justify-end gap-1 text-gray-400 tabular-nums whitespace-nowrap">
        {{ i "star" "w-3 h-3 fill-current shrink-0 mt-1" }}
        {{ if .RepoStats }}
          <span>{{ scaleFmt .RepoStats.StarCount }}</span>
        {{ else }}
          <span>0</span>
        {{ end }}
      </div>
      <div class="min-w-0">
        <span class="text-sm font-medium dark:text-white truncate block">{{ $repoOwner }}/{{ .Name }}</span>
        {{ with .Description }}
          <span class="text-sm text-gray-500 dark:text-gray-400 truncate line-clamp-1 block">{{ . | description }}</span>
        {{ end }}
      </div>
      <div class="text-gray-400 text-sm whitespace-nowrap font-mono">
        {{ if and .RepoStats .RepoStats.Language }}
          {{ $lang := .RepoStats.Language }}
          {{ $display := $lang }}
          {{ if gt (len $lang) 6 }}
            {{ $display = .RepoStats.LangShortName }}
          {{ end }}
          <div class="flex items-center gap-1.5">
            {{ template "repo/fragments/colorBall" (dict "color" (langColor $lang)) }}
            <span>{{ $display }}</span>
          </div>
        {{ end }}
      </div>
    </a>
  {{ end }}
{{ end }}