{{ define "title" }}Vouches · {{ resolve .Card.UserDid }} · Tangled{{ end }}

{{ define "profileContent" }}
  {{ $isSelf := and .LoggedInUser (eq .LoggedInUser.Did .Card.UserDid) }}
  <div id="all-vouches" class="md:col-span-8 order-2 md:order-2 flex flex-col gap-6">
    {{ if $isSelf }}{{ template "vouchSuggestions" . }}{{ end }}
    {{ block "vouchTimeline" . }}{{ end }}
    {{ if gt .VouchCount .Page.Limit }}
      {{ $handle := resolve .Card.UserDid }}
      {{ template "fragments/pagination" (dict
          "Page" .Page
          "TotalCount" .VouchCount
          "BasePath" (printf "/%s" $handle)
          "QueryParams" (queryParams "tab" "vouches")
      ) }}
    {{ end }}
  </div>
{{ end }}

{{ define "vouchTimeline" }}
  {{ $isSelf := and .LoggedInUser (eq .LoggedInUser.Did .Card.UserDid) }}
  {{ if not .LoggedInUser }}
    <div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
      <span>You need to <a href="/login" class="underline">log in</a> to view vouches.</span>
    </div>
  {{ else if not .Vouches }}
    {{ if not (and $isSelf .Suggestions) }}
      <div class="text-base text-gray-500 flex items-center justify-center italic p-12 border border-gray-200 dark:border-gray-700 rounded">
        <span>No vouches in your network yet.</span>
      </div>
    {{ end }}
  {{ else }}
    <div class="relative flex flex-col gap-6 ml-5 px-4 border border-transparent">
      <div class="absolute top-8 bottom-8 w-0.5 bg-gray-200 dark:bg-gray-700 z-0"></div>
      {{ range .Vouches }}
        {{ template "vouchTimelineItem" (list $.Card.UserDid $.LoggedInUser.Did . $.EvidencePulls $.EvidenceIssues) }}
      {{ end }}
    </div>
  {{ end }}
{{ end }}

{{ define "vouchSuggestions" }}
  {{ if .Suggestions }}
    <div class="flex flex-col gap-2">
      {{ range .Suggestions }}
        <div class="flex items-center gap-4 border border-gray-200 dark:border-gray-700 rounded-sm p-4 bg-white dark:bg-gray-800">
          <img src="{{ tinyAvatar .Did.String }}" alt="" class="rounded-full size-10 border border-gray-300 dark:border-gray-700 shrink-0" />
          <div class="flex flex-col gap-0.5 min-w-0 flex-1">
            <a href="/{{ resolve .Did.String }}" class="font-medium hover:underline dark:text-white truncate">{{ resolve .Did.String }}</a>
            <span class="text-sm text-gray-500 dark:text-gray-400">{{ .Reason }}</span>
          </div>
          <div class="shrink-0 w-32">
            {{ template "user/fragments/vouch" (dict "VouchRelationship" .VouchRelationship) }}
          </div>
          <button
            hx-post="/vouch/skip?subject={{ .Did.String }}"
            hx-trigger="click"
            hx-disabled-elt="this"
            title="Skip suggestion"
            class="group hit-area hit-area-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 p-0.5"
          >
            {{ i "x" "size-4 block group-[.htmx-request]:hidden" }}
            {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:block" }}
          </button>
        </div>
      {{ end }}
    </div>
  {{ end }}
{{ end }}

{{ define "vouchTimelineItem" }}
  {{ $profileDid := index . 0 }}
  {{ $viewerDid := index . 1 }}
  {{ $v := index . 2 }}
  {{ $evidencePulls := index . 3 }}
  {{ $evidenceIssues := index . 4 }}
  {{ $isOutgoing := eq $v.Did $profileDid }}
  {{ $isVouch := $v.IsVouch }}
  {{ $isSelf := eq $profileDid $viewerDid }}

  <div class="-ml-4 flex items-start gap-3 relative z-10">
    <div class="flex-shrink-0 flex items-center justify-center size-8 rounded-full
      {{ if $isVouch }}bg-green-200 dark:bg-green-800{{ else }}bg-red-200 dark:bg-red-800{{ end }}
      border border-gray-300 dark:border-gray-700
      ">
      {{ if $isVouch }}
        {{ if $isOutgoing }}
          {{ i "arrow-up-right" "size-5 text-green-500 dark:text-green-400" }}
        {{ else }}
          {{ i "arrow-down-left" "size-5 text-green-500 dark:text-green-400" }}
        {{ end }}
      {{ else }}
        {{ if $isOutgoing }}
          {{ i "arrow-up-right" "size-5 text-red-500 dark:text-red-400" }}
        {{ else }}
          {{ i "arrow-down-left" "size-5 text-red-500 dark:text-red-400" }}
        {{ end }}
      {{ end }}
    </div>

    <div class="flex flex-col gap-1 mt-1">
      <div class="flex flex-wrap items-center gap-1 dark:text-white">
        {{ if and $isSelf $isOutgoing }}
          <span class="font-medium text-gray-700 dark:text-gray-300">you</span>
        {{ else }}
          <a href="/{{ resolve $v.Did.String }}" class="font-medium hover:underline">{{ resolve $v.Did.String }}</a>
        {{ end }}
        <span class="text-gray-500 dark:text-gray-400">
          {{ if $isVouch }}vouched for{{ else }}denounced{{ end }}
        </span>
        {{ if and $isSelf (not $isOutgoing) }}
          <span class="font-medium text-gray-700 dark:text-gray-300">you</span>
        {{ else }}
          <a href="/{{ resolve $v.SubjectDid.String }}" class="font-medium hover:underline">{{ resolve $v.SubjectDid.String }}</a>
        {{ end }}
        <span class="text-gray-400 dark:text-gray-500 text-sm">{{ relTimeFmt $v.CreatedAt }}</span>
      </div>
      {{ with $v.Reason }}
        <p class="text-gray-500 dark:text-gray-400 text-sm">{{ . }}</p>
      {{ end }}
      {{ if $v.Evidences }}
        <div class="flex flex-col gap-2 mt-1 text-sm">
          {{ range $v.Evidences }}
            {{ $pull := index $evidencePulls . }}
            {{ $issue := index $evidenceIssues . }}
            {{ if $pull }}
              {{ template "user/fragments/pullEvent" $pull }}
            {{ else if $issue }}
              {{ template "user/fragments/issueEvent" $issue }}
            {{ end }}
          {{ end }}
        </div>
      {{ end }}
    </div>
  </div>
{{ end }}