{{ 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 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 data-lucide="arrow-right" class="w-4 h-4"></i></a>
  </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 }}</a>
        created
        <a href="/{{ $userHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ .Repo.Name }}</a>
        <time class="text-gray-700">{{ .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 }}</a>
        followed
        <a href="/{{ $subjectHandle }}" class="no-underline hover:underline">{{ $subjectHandle }}</a>
        <time class="text-gray-700">{{ .Follow.FollowedAt | timeFmt }}</time>
        </p>
      </div>
      {{ end }}
    </div>
    {{ end }}
  </div>
</div>
{{ end }}