{{ define "timeline/fragments/timeline" }}
    <div id="timeline-feed" class="mt-4 py-4">
        <div class="flex items-center justify-between pl-4 pb-4">
          <h3 class="text-base dark:text-white flex items-center gap-2">
            {{ i "gallery-vertical" "size-4 flex-shrink-0" }}
            Timeline
          </h3>
          {{ if .LoggedInUser }}
          <div class="btn-group grid grid-cols-2">
            <a href="/timeline"
               hx-get="/timeline"
               hx-target="#timeline-feed"
               hx-select="#timeline-feed"
               hx-swap="outerHTML"
               hx-push-url="true"
               class="group btn-group-item inline-flex items-center justify-center {{ if not .FollowingOnly }}active{{ end }}">
              <span class="relative inline-flex items-center justify-center">
                <span class="group-[.htmx-request]:invisible">Global</span>
                {{ i "loader-circle" "size-3.5 animate-spin absolute hidden group-[.htmx-request]:block" }}
              </span>
            </a>
            <a href="/timeline?following=true"
               hx-get="/timeline?following=true"
               hx-target="#timeline-feed"
               hx-select="#timeline-feed"
               hx-swap="outerHTML"
               hx-push-url="true"
               class="group btn-group-item inline-flex items-center justify-center {{ if .FollowingOnly }}active{{ end }}">
              <span class="relative inline-flex items-center justify-center">
                <span class="group-[.htmx-request]:invisible">Following</span>
                {{ i "loader-circle" "size-3.5 animate-spin absolute hidden group-[.htmx-request]:block" }}
              </span>
            </a>
          </div>
          {{ end }}
        </div>

        {{ if .Timeline }}
        <div class="flex flex-col gap-4">
          {{ range $i, $g := .Timeline }}
            <div class="relative">
              {{ if ne $i 0 }}
                <div class="absolute left-8 -top-4 w-px h-4 bg-gray-300 dark:bg-gray-600"></div>
              {{ end }}
              {{ $primary := $g.Primary }}
              <div class="flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-sm">
                {{ if $primary.Repo }}
                  {{ template "timeline/fragments/repoEvent" (list $ $g) }}
                {{ else if $primary.RepoStar }}
                  {{ template "timeline/fragments/starEvent" (list $ $g) }}
                {{ else if $primary.Follow }}
                  {{ template "timeline/fragments/followEvent" (list $ $g) }}
                {{ end }}
              </div>
            </div>
          {{ end }}
        </div>
        {{ else }}
          <div class="px-4 py-8 text-sm text-center text-gray-400 dark:text-gray-500 border border-gray-200 dark:border-gray-700 rounded-sm ">
            <div class="w-10 h-10 mx-auto mb-3 text-gray-300 dark:text-gray-600">
              {{ if .FollowingOnly }}
                {{ i "user-round-x" "size-10" }}
              {{ else }}
                {{ i "radio" "size-10" }}
              {{ end }}
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400">
              {{ if .FollowingOnly }}
                Follow some users to see their activity here.
              {{ else }}
                Nothing here yet.
              {{ end }}
            </p>
          </div>
        {{ end }}
    </div>
{{ end }}

{{ define "timeline/fragments/repoEvent" }}
  {{ $root := index . 0 }}
  {{ $group := index . 1 }}
  {{ $event := $group.Primary }}
  {{ $repo := $event.Repo }}
  {{ $source := $event.Source }}
  {{ $userHandle := resolve $repo.Did }}
    <div class="pl-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex flex-wrap items-center gap-2 text-sm">
      {{ template "user/fragments/picHandleLink" $repo.Did }}
      {{ with $source }}
        {{ $sourceDid := resolve .Did }}
        forked
        <a href="/{{ $sourceDid }}/{{ .Slug }}"class="no-underline hover:underline">
            {{ $sourceDid }}/{{ .Name }}
        </a>
        to
        <a href="/{{ $userHandle }}/{{ $repo.Slug }}" class="no-underline hover:underline">{{ $repo.Name }}</a>
      {{ else }}
        created
        <a href="/{{ $userHandle }}/{{ $repo.Slug }}" class="no-underline hover:underline">
          {{ $repo.Name }}
        </a>
      {{ end }}
      <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $repo.Created }}</span>
    </div>
  {{ with $repo }}
    {{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount "RepoName" .Slug)) }}
  {{ end }}
{{ end }}

{{ define "timeline/fragments/starEvent" }}
  {{ $root := index . 0 }}
  {{ $group := index . 1 }}
  {{ $event := $group.Primary }}
  {{ $star := $event.RepoStar }}
  {{ with $star }}
    {{ $repoOwnerHandle :=  resolve .Repo.Did }}
    <div class="pl-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex flex-wrap items-center gap-2 text-sm">
        {{ template "user/fragments/picHandleLink" .Did }}
        {{ if $group.IsCollapsed }}
          <span class="inline-flex items-center gap-1.5">
            {{ template "timeline/fragments/othersBadge" $group }}
            starred
          </span>
        {{ else }}
          starred
        {{ end }}
        <a href="/{{ $repoOwnerHandle }}/{{ .Repo.Slug }}" class="no-underline hover:underline">
          {{ $repoOwnerHandle | truncateAt30 }}/{{ .Repo.Name }}
        </a>
        <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" .Created }}</span>
    </div>
    {{ with .Repo }}
      {{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount "RepoName" .Slug)) }}
    {{ end }}
  {{ end }}
{{ end }}

{{ define "timeline/fragments/followEvent" }}
  {{ $root := index . 0 }}
  {{ $group := index . 1 }}
  {{ $event := $group.Primary }}
  {{ $follow := $event.Follow }}
  {{ $profile := $event.Profile }}
  {{ $followStats := $event.FollowStats }}
  {{ $followStatus := $event.FollowStatus }}

  {{ $subjectHandle :=  resolve $follow.SubjectDid }}
  <div class="pl-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex flex-wrap items-center gap-2 text-sm">
      {{ template "user/fragments/picHandleLink" $follow.UserDid }}
      {{ if $group.IsCollapsed }}
        <span class="inline-flex items-center gap-1.5">
          {{ template "timeline/fragments/othersBadge" $group }}
          followed
        </span>
      {{ else }}
        followed
      {{ end }}
      {{ template "user/fragments/picHandleLink" $subjectHandle }}
      <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $follow.FollowedAt }}</span>
  </div>
  {{ template "user/fragments/followCard"
      (dict
          "LoggedInUser" $root.LoggedInUser
          "UserDid" $follow.SubjectDid
          "Profile" $profile
          "FollowStatus" $followStatus
          "FollowersCount" $followStats.Followers
          "FollowingCount" $followStats.Following) }}
{{ end }}