{{ template "header" .}}
{{ template "gist_header" .}}
    {{ if ne (len .likers) 0 }}
        <h3 class="text-xl font-bold leading-tight break-all py-2">Likes</h3>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-5">
            {{ range $user := .likers }}
                <div class="relative flex items-center space-x-3 rounded-lg border border-gray-600 bg-gray-800 px-6 py-5 shadow-sm focus-within:ring-1 focus-within:border-primary-500 focus-within:ring-primary-500 hover:border-gray-400">
                    <div class="min-w-0 flex">
                        <img class="h-12 w-12 rounded-md mr-2 border border-gray-700" src="{{ avatarUrl $user.MD5Hash }}" alt="">
                        <a href="/{{ $user.Username }}" class="focus:outline-none">
                            <span class="absolute inset-0" aria-hidden="true"></span>
                            <p class="text-sm font-medium text-slate-300 align-middle">{{ $user.Username }}</p>
                        </a>
                    </div>
                </div>
            {{ end }}
        </div>
        <div class="flex justify-center space-x-2 mt-4">
            {{ template "pagination" . }}
        </div>
    {{ else }}
        <div class="text-center">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mx-auto h-12 w-12 text-slate-400">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
            </svg>

            <h3 class="mt-2 text-sm font-medium text-slate-300">No likes yet</h3>
        </div>
    {{ end }}
{{ template "gist_footer" .}}
{{ template "footer" .}}