{{ define "title" }}timeline{{ end }}

{{ define "extrameta" }}
    <meta property="og:title" content="timeline · tangled" />
    <meta property="og:type" content="object" />
    <meta property="og:url" content="https://tangled.sh" />
    <meta property="og:description" content="see what's tangling" />
{{ end }}

{{ define "topbar" }}
  {{ template "layouts/topbar" $ }}
{{ end }}

{{ define "content" }}
    {{ with .LoggedInUser }}
        {{ block "timeline" $ }}{{ end }}
    {{ else }}
        {{ block "hero" $ }}{{ end }}
        {{ block "timeline" $ }}{{ end }}
    {{ end }}
{{ end }}

{{ define "hero" }}
    <div class="flex flex-col text-black dark:text-white p-6 gap-6 max-w-xl">
        <div class="font-bold text-4xl">tightly-knit<br>social coding.</div>

        <p class="text-lg">
          tangled is new social-enabled git collaboration platform built on <a class="underline" href="https://atproto.com/">atproto</a>.
        </p>
        <p class="text-lg">
          we envision a place where developers have complete ownership of their
          code, open source communities can freely self-govern and most
          importantly, coding can be social and fun again.
        </p>

        <div class="flex gap-6 items-center">
          <a href="/signup" class="no-underline hover:no-underline ">
            <button class="btn-create flex gap-2 px-4 items-center">
              join now {{ i "arrow-right" "size-4" }}
            </button>
          </a>
        </div>
    </div>
{{ end }}

{{ define "timeline" }}
    <div>
        <div class="p-6">
            <p class="text-xl font-bold dark:text-white">Timeline</p>
        </div>

        <div class="flex flex-col gap-4">
          {{ range $i, $e := .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 }}
              {{ with $e }}
                <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 .Repo }}
                    {{ block "repoEvent" (list $ .Repo .Source) }} {{ end }}
                  {{ else if .Star }}
                    {{ block "starEvent" (list $ .Star) }} {{ end }}
                  {{ else if .Follow }}
                    {{ block "followEvent" (list $ .Follow .Profile .FollowStats) }} {{ end }}
                  {{ end }}
                </div>
              {{ end }}
            </div>
          {{ end }}
        </div>
    </div>
{{ end }}

{{ define "repoEvent" }}
  {{ $root := index . 0 }}
  {{ $repo := index . 1 }}
  {{ $source := index . 2 }}
  {{ $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 }}/{{ .Name }}"class="no-underline hover:underline">
            {{ $sourceDid }}/{{ .Name }}
        </a>
        to
        <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline">{{ $repo.Name }}</a>
      {{ else }}
        created
        <a href="/{{ $userHandle }}/{{ $repo.Name }}" 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) }}
  {{ end }}
{{ end }}

{{ define "starEvent" }}
  {{ $root := index . 0 }}
  {{ $star := index . 1 }}
  {{ with $star }}
    {{ $starrerHandle :=  resolve .StarredByDid }}
    {{ $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" $starrerHandle }}
        starred
        <a href="/{{ $repoOwnerHandle }}/{{ .Repo.Name }}" 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) }}
    {{ end }}
  {{ end }}
{{ end }}


{{ define "followEvent" }}
  {{ $root := index . 0 }}
  {{ $follow := index . 1 }}
  {{ $profile := index . 2 }}
  {{ $stat := index . 3 }}

  {{ $userHandle :=  resolve $follow.UserDid }}
  {{ $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" $userHandle }}
      followed
      {{ template "user/fragments/picHandleLink" $subjectHandle }}
      <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $follow.FollowedAt }}</span>
  </div>
  <div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex items-center gap-4">
    <div class="flex-shrink-0 max-h-full w-24 h-24">
      <img class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" />
    </div>

    <div class="flex-1 min-h-0 justify-around flex flex-col">
      <a href="/{{ $subjectHandle }}">
        <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ $subjectHandle | truncateAt30 }}</span>
      </a>
      {{ with $profile }}
        {{ with .Description }}
          <p class="text-sm pb-2 md:pb-2">{{.}}</p>
        {{ end }}
      {{ end }}
      {{ with $stat }}
        <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full text-sm">
          <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>
          <span id="followers">{{ .Followers }} followers</span>
          <span class="select-none after:content-['·']"></span>
          <span id="following">{{  .Following  }} following</span>
        </div>
      {{ end }}
    </div>
  </div>
{{ end }}