{{/* Takes a VouchRelationship directly */}}
{{ define "user/fragments/networkVouches" }}
  {{ $vouches := (list) }}
  {{ $denounces := (list) }}
  {{ range .IndirectVouches }}
    {{ if .IsVouch }}
      {{ $vouches = append $vouches .Did.String }}
    {{ else if .IsDenounce }}
      {{ $denounces = append $denounces .Did.String }}
    {{ end }}
  {{ end }}

  <div class="rounded overflow-hidden">
    {{ if $vouches }}
      <div class="
        bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200
        p-2 flex items-center justify-between gap-3
        border-x border-green-600/25 dark:border-green-400/25
        {{ if $denounces }} border-t {{ else }} border-y {{ end }}
        ">
        <a class="text-sm text-green-800 dark:text-green-200 hover:no-underline" href="/{{ .SubjectDid.String }}?tab=vouches">
          Vouched for by {{ len $vouches }} {{ if eq (len $vouches) 1 }}user{{ else }}users{{ end }}
        </a>
        {{ template "fragments/tinyAvatarList" (dict "all" $vouches "classes" "size-6") }}
      </div>
    {{ end }}

    {{ if $denounces }}
      <div class="
        bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200
        p-2 flex items-center justify-between gap-3
        border-x border-red-600/25 dark:border-red-400/25
        {{ if $vouches }} border-b {{ else }} border-y {{ end }}
        ">
        <a class="text-sm text-red-800 dark:text-red-200 hover:no-underline" href="/{{ .SubjectDid.String }}?tab=vouches">
          Denounced by {{ len $denounces }} {{ if eq (len $denounces) 1 }}user{{ else }}users{{ end }}
        </a>
        {{ template "fragments/tinyAvatarList" (dict "all" $denounces "classes" "size-6") }}
      </div>
    {{ end }}
  </div>
{{ end }}