{{ 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="/login" class="no-underline hover:no-underline ">
            <button class="btn 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-3 relative">
            <div
                class="absolute left-8 top-0 bottom-0 w-px bg-gray-300 dark:bg-gray-600"
            ></div>
            {{ range .Timeline }}
                <div
                    class="px-6 py-2 bg-white dark:bg-gray-800 rounded drop-shadow-sm w-fit"
                >
                    {{ if .Repo }}
                        {{ $userHandle :=  index $.DidHandleMap .Repo.Did }}
                        <div class="flex items-center">
                            <p class="text-gray-600 dark:text-gray-300">
                                <a
                                    href="/{{ $userHandle }}"
                                    class="no-underline hover:underline"
                                    >{{ $userHandle | truncateAt30 }}</a
                                >
                                {{ if .Source }}
                                    forked
                                    <a
                                        href="/{{ index $.DidHandleMap .Source.Did }}/{{ .Source.Name }}"
                                        class="no-underline hover:underline"
                                    >
                                        {{ index $.DidHandleMap .Source.Did }}/{{ .Source.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 }}
                                <time
                                    class="text-gray-700 dark:text-gray-400 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 dark:text-gray-300">
                                <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 dark:text-gray-400 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 dark:text-gray-300">
                                <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 dark:text-gray-400 text-xs"
                                    >{{ .Star.Created | timeFmt }}</time
                                >
                            </p>
                        </div>
                    {{ end }}
                </div>
            {{ end }}
        </div>
    </div>
{{ end }}