{{ define "timeline/fragments/vouchSuggestions" }}
  {{ if and .LoggedInUser .VouchSuggestions }}
    <div class="border border border-gray-200 dark:border-gray-700 rounded-sm divide-y divide-gray-200 dark:divide-gray-700">
      <a href="/{{ .LoggedInUser.Did }}?tab=vouches" class="flex items-center justify-between bg-white/50 dark:bg-gray-800/50 no-underline hover:no-underline">
        <h3 class="text-base dark:text-white flex items-center gap-2 px-4 py-2">
          {{ i "shield-plus" "size-4 flex-shrink-0" }}
          Suggested
        </h3>
        <span class="text-sm font-normal flex items-center gap-1 pr-4">
          View all {{ i "arrow-right" "size-3.5" }}
        </span>
      </a>
      <div class="flex flex-col gap-4 bg-white dark:bg-gray-800 p-4">
        {{ range .VouchSuggestions }}
        <div class="flex items-center gap-3 ">
          {{ template "user/fragments/picLink" (list .Did.String "size-10") }}
          <div class="flex flex-col min-w-0 flex-1">
            <a href="/{{ resolve .Did.String }}" class="text-sm font-medium dark:text-white hover:underline truncate">{{ resolve .Did.String }}</a>
            <span class="text-sm text-gray-500 dark:text-gray-400 truncate" title="{{ .Reason }}">{{ .Reason }}</span>
          </div>
          <div class="shrink-0">
            {{ template "user/fragments/vouch" (dict "VouchRelationship" .VouchRelationship) }}
          </div>
        </div>
        {{ end }}
      </div>
    </div>
  {{ end }}
{{ end }}