{{ define "title" }}{{ resolve .Card.UserDid }}{{ end }}

{{ define "extrameta" }}
    {{ $handle := resolve .Card.UserDid }}
    {{ $avatarUrl := profileAvatarUrl .Card.Profile "" }}
    {{ $description := or .Card.Profile.Description (printf "%s on Tangled" $handle) }}
    {{ $url := printf "https://tangled.org/%s" $handle }}

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="{{ $handle }}" />
    <meta property="og:type" content="profile" />
    <meta property="og:url" content="{{ $url }}" />
    <meta property="og:description" content="{{ $description }}" />
    <meta property="og:image" content="{{ $avatarUrl }}" />
    <meta property="og:image:width" content="512" />
    <meta property="og:image:height" content="512" />
    <meta property="og:image:alt" content="{{ $handle }}'s avatar" />
    <meta property="profile:username" content="{{ $handle }}" />

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="{{ $handle }}" />
    <meta name="twitter:description" content="{{ $description }}" />
    <meta name="twitter:image" content="{{ $avatarUrl }}" />
    <meta name="twitter:image:alt" content="{{ $handle }}'s avatar" />

    <!-- Additional SEO -->
    <meta name="description" content="{{ $description }}" />
    <link rel="canonical" href="{{ $url }}" />
{{ end }}

{{ define "content" }}
  {{ if not .Card.HasProfile }}
  <section class="bg-white dark:bg-gray-800 px-2 py-6 md:p-6 rounded w-full dark:text-white drop-shadow-sm">
    <div class="flex items-center gap-6 p-4">
      <img class="w-28 h-28 shrink-0 object-cover rounded-full" src="{{ profileAvatarUrl .Card.Profile "" }}" />
      <div>
        <p class="text-lg font-bold">{{ resolve .Card.UserDid }}</p>
        <p class="text-gray-700 dark:text-gray-300 mt-2">This user hasn't joined Tangled yet.</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Let them know we're waiting for them!</p>
      </div>
    </div>
  </section>
  {{ else }}
  {{ template "profileTabs" . }}
  <section class="bg-white dark:bg-gray-800 px-2 py-6 md:p-6 rounded w-full dark:text-white drop-shadow-sm">
    <div class="grid grid-cols-1 md:grid-cols-11 gap-4">
      {{ $style := "hidden md:block md:col-span-3" }}
      {{ if eq $.Active "overview" }}
        {{ $style = "md:col-span-3" }}
      {{ end }}
      <div class="{{ $style }} order-1 order-1">
        <div class="flex flex-col gap-4">
          {{ template "user/fragments/profileCard" .Card }}
          {{ block "punchcard" .Card.Punchcard }} {{ end }}
        </div>
      </div>

      {{ block "profileContent" . }} {{ end }}
    </div>
  </section>
  {{ end }}
{{ end }}

{{ define "profileTabs" }}
<nav class="w-full pl-4 overflow-x-auto overflow-y-hidden">
  <div class="flex z-60">
    {{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }}
    {{ $tabs := .Card.GetTabs }}
    {{ $tabmeta := dict "x" "y" }}
    {{ range $item := $tabs }}
      {{ $key := index $item 0 }}
      {{ $value := index $item 1 }}
      {{ $icon := index $item 2 }}
      {{ $meta := index $item 3 }}
      <a
        href="?tab={{ $value }}"
        class="relative -mr-px group no-underline hover:no-underline"
        hx-boost="true">
        <div
          class="px-4 py-1 mr-1 text-black dark:text-white min-w-[80px] text-center relative rounded-t whitespace-nowrap
           {{ if eq $.Active $key }}
              {{ $activeTabStyles }}
           {{ else }}
              group-hover:bg-gray-100/25 group-hover:dark:bg-gray-700/25
           {{ end }}
           ">
          <span class="flex items-center justify-center">
            {{ i $icon "w-4 h-4 mr-2" }}
            {{ $key }}
            {{ if $meta }}
              <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-sm ml-1">{{ $meta }}</span>
            {{ end }}
          </span>
        </div>
      </a>
    {{ end }}
  </div>
</nav>
{{ end }}

{{ define "punchcard" }}
  {{ $now := now }}
  <div>
    <p class="px-2 pb-4 flex gap-2 text-sm font-bold dark:text-white">
      PUNCHCARD
      <span class="font-mono font-normal text-sm text-gray-500 dark:text-gray-400 ">
        {{ .Total | int64 | commaFmt }} commits
      </span>
    </p>
      <div class="grid grid-cols-28 md:grid-cols-14 gap-y-3 w-full h-full">
        {{ range .Punches }}
          {{ $count := .Count }}
          {{ $theme := "bg-gray-200 dark:bg-gray-700 size-[4px]" }}
          {{ if lt $count 1 }}
            {{ $theme = "bg-gray-200 dark:bg-gray-700 size-[4px]" }}
          {{ else if lt $count 2 }}
            {{ $theme = "bg-green-200 dark:bg-green-900 size-[5px]" }}
          {{ else if lt $count 4 }}
            {{ $theme = "bg-green-300 dark:bg-green-800 size-[5px]" }}
          {{ else if lt $count 8 }}
            {{ $theme = "bg-green-400 dark:bg-green-700 size-[6px]" }}
          {{ else }}
            {{ $theme = "bg-green-500 dark:bg-green-600 size-[7px]" }}
          {{ end }}

          {{ if .Date.After $now }}
            {{ $theme = "border border-gray-200 dark:border-gray-700 size-[4px]" }}
          {{ end }}
          <div class="w-full h-full flex justify-center items-center">
            <div
              class="aspect-square rounded-full transition-all duration-300 {{ $theme }} max-w-full max-h-full"
              title="{{ .Date.Format "2006-01-02" }}: {{ .Count }} commits">
            </div>
          </div>
        {{ end }}
      </div>
  </div>
{{ end }}

{{ define "layouts/profilebase" }}
    {{ template "layouts/base" . }}
{{ end }}