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

{{ define "topbar" }}
  {{ with .LoggedInUser }}
    {{ template "layouts/topbar" $ }}
  {{ else }}
  {{ end }}
{{ end }}

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

{{ define "hero" }}
<div class="flex flex-col items-center justify-center text-center rounded drop-shadow bg-white text-black py-4 px-10">
  <div class="font-bold italic text-4xl mb-4">
    tangled
  </div>
  <div class="italic text-lg">
    tightly-knit social coding, <a href="/login" class="underline inline-flex gap-1 items-center">join now {{ i "arrow-right" "w-4 h-4" }}</a>
    <p class="pt-5 px-10 text-sm text-gray-500">Join our IRC channel: <a href="https://web.libera.chat/#tangled"><code>#tangled</code> on Libera Chat</a>.
    Read an introduction to Tangled <a href="https://blog.tangled.sh/intro">here</a>.</p>
  </div>
</div>
{{ end }}

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

  <div class="flex flex-col gap-3 relative">
    <div class="absolute left-8 top-0 bottom-0 w-px bg-gray-300"></div>
    {{ range .Timeline }}
    <div class="px-6 py-2 bg-white rounded drop-shadow-sm w-fit">
      {{ if .Repo }}
        {{ $userHandle :=  index $.DidHandleMap .Repo.Did }}
        <div class="flex items-center">
          <p class="text-gray-600">
          <a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle | truncateAt30 }}</a>
          created
          <a href="/{{ $userHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ .Repo.Name }}</a>
          <time class="text-gray-700 text-xs">{{ .Repo.Created | timeFmt }}</time>
          </p>
        </div>
      {{ else if .Follow }}
        {{ $userHandle :=  index $.DidHandleMap .Follow.UserDid }}
        {{ $subjectHandle :=  index $.DidHandleMap .Follow.SubjectDid }}
        <div class="flex items-center">
          <p class="text-gray-600">
          <a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle | truncateAt30 }}</a>
          followed
          <a href="/{{ $subjectHandle }}" class="no-underline hover:underline">{{ $subjectHandle | truncateAt30 }}</a>
          <time class="text-gray-700 text-xs">{{ .Follow.FollowedAt | timeFmt }}</time>
          </p>
        </div>
      {{ else if .Star }}
        {{ $starrerHandle :=  index $.DidHandleMap .Star.StarredByDid }}
        {{ $repoOwnerHandle :=  index $.DidHandleMap .Star.Repo.Did }}
        <div class="flex items-center">
          <p class="text-gray-600">
          <a href="/{{ $starrerHandle }}" class="no-underline hover:underline">{{ $starrerHandle | truncateAt30 }}</a>
          starred
          <a href="/{{ $repoOwnerHandle }}/{{ .Star.Repo.Name }}" class="no-underline hover:underline">{{ $repoOwnerHandle | truncateAt30 }}/{{ .Star.Repo.Name }}</a>
          <time class="text-gray-700 text-xs">{{ .Star.Created | timeFmt }}</time>
          </p>
        </div>
      {{ end }}
    </div>
    {{ end }}
  </div>
</div>
{{ end }}