{{ define "user/fragments/picLink" }}
  {{ $did := index . 0 }}
  {{ $classes := index . 1 }}
  {{ $handle := resolve $did  }}
  {{ $vr := false }}
  {{ if ge (len .) 3 }}
    {{ $vr = index . 2 }}
  {{ end }}
  <div class="relative inline-block"
       {{ if $vr }}
       hx-get="/profile/popover?did={{ $did }}"
       hx-trigger="mouseenter once"
       hx-target="find [data-profile-popover-content]"
       hx-swap="innerHTML"
       onmouseenter="(function(el){
         clearTimeout(el._pht);
         el._pht = setTimeout(function(){
           var r=el.getBoundingClientRect(),p=el.querySelector('[data-profile-popover]');
           if(p){p.style.top=r.bottom+'px';p.style.left=r.left+'px';p.classList.remove('hidden');}
         }, 500);
       })(this)"
       onmouseleave="(function(el){
         clearTimeout(el._pht);
         var p=el.querySelector('[data-profile-popover]');
         if(!p)return;
         var modal=document.getElementById('vouch-modal-'+p.dataset.vouchModalId);
         if(modal&&modal.matches(':popover-open'))return;
         p.classList.add('hidden');
       })(this)"
       {{ end }}>
    <a href="/{{ $handle }}" title="{{ $handle }}">
      <img
          src="{{ tinyAvatar $did }}"
          alt=""
          class="rounded-full border border-gray-300 dark:border-gray-700 {{ $classes }}"
      />
    </a>
    {{ if $vr }}
      {{ if ne $did $vr.ViewerDid }}
        <button
          type="button"
          popovertarget="vouch-modal-{{ normalizeForHtmlId $vr.SubjectDid.String }}"
          popovertargetaction="toggle"
          class="absolute -bottom-0.5 -right-0.5 w-1/2 h-1/2 cursor-pointer">
          {{ if $vr.IsDirectVouch }}
            {{ template "fragments/icons/shield-direct-vouch" "w-full h-full" }}
          {{ else if $vr.IsDirectDenounce }}
            {{ template "fragments/icons/shield-direct-denounce" "w-full h-full" }}
          {{ else if $vr.IsMixed }}
            {{ template "fragments/icons/shield-mixed" "w-full h-full" }}
          {{ else if $vr.IsIndirectVouch }}
            {{ template "fragments/icons/shield-indirect-vouch" "w-full h-full text-white dark:text-gray-900" }}
          {{ else if $vr.IsIndirectDenounce }}
            {{ template "fragments/icons/shield-indirect-denounce" "w-full h-full text-white dark:text-gray-900" }}
          {{ end }}
        </button>
      {{ end }}
    {{ end }}
    {{ if $vr }}
    <div data-profile-popover
         data-vouch-modal-id="{{ normalizeForHtmlId $did }}"
         class="hidden z-[9999] pt-1 w-80"
         style="position:fixed;">
      <div data-profile-popover-content
           class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded shadow-sm p-3">
        <div class="flex items-center justify-center py-4">
          {{ i "loader-circle" "w-5 h-5 animate-spin text-gray-400" }}
        </div>
      </div>
    </div>
    {{ end }}
  </div>
  {{ if $vr }}
    {{ if ne $did $vr.ViewerDid }}
      {{ template "user/fragments/vouchPopover" (dict "VouchRelationship" $vr) }}
    {{ end }}
  {{ end }}
{{ end }}