{{ define "_gist_preview" }}


    <div class="mb-8">
        <div class="flex ">
            <div class="div">
                <a href="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}">
                    {{ if not (shouldGenerateAvatar .gist.User .DisableGravatar) }}
                        <img class="h-10 min-w-10 w-10 rounded-md mr-2 border border-gray-200 dark:border-gray-700 my-1" src="{{ avatarUrl .gist.User .DisableGravatar }}" alt="{{ .gist.User.Username }}'s Avatar">
                    {{ else }}
                        <svg class="h-10 min-w-10 w-10 rounded-md mr-2 border border-gray-200 dark:border-gray-700 my-1" data-jdenticon-value="{{ .gist.User.Username }}" width="40" height="40"></svg>
                    {{ end }}
                </a>
            </div>
            <div class="flex-auto">
                <div class="flex flex-col lg:flex-row">
                    <h4 class="text-md leading-tight break-all py-1 flex-auto">
                        <a href="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}">{{ .gist.User.Username }}</a> <span class="text-slate-700 dark:text-slate-300">/</span> <a class="font-bold" href="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}">{{ .gist.Title }}</a>
                    </h4>
                    <div class="flex space-x-4 lg:flex-row flex py-1 lg:py-0 lg:ml-auto text-slate-500">
                        <div class="flex items-center float-right text-xs">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-1 inline-flex">
                                <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>
                            <span class="whitespace-nowrap">{{ .gist.NbLikes }} {{ .locale.Tr "gist.list.likes" }}</span>
                        </div>
                        <div class="flex items-center float-right text-xs">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-1 inline-flex">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z" />
                            </svg>
                            <span class="whitespace-nowrap">{{ .gist.NbForks }} {{ .locale.Tr "gist.list.forks" }}</span>
                        </div>
                        <div class="flex items-center float-right text-xs">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-1 inline-flex">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" />
                            </svg>
                            <span class="whitespace-nowrap">{{ .gist.NbFiles }} {{ .locale.Tr "gist.list.files" }}</span>
                        </div>
                    </div>

                </div>
                <h5 class="text-sm text-slate-500 pb-1">{{ .locale.Tr "gist.list.last-active" }} <span>{{ .gist.UpdatedAt | humanTimeDiff }}</span>
                    {{ if .gist.Forked }} • {{ .locale.Tr "gist.list.forked-from" }} <a href="{{ .c.ExternalUrl }}/{{ .gist.Forked.User.Username }}/{{ .gist.Forked.Identifier }}">{{ .gist.Forked.User.Username }}/{{ .gist.Forked.Title }}</a> {{ end }}
                    {{ if .gist.Private }} • <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-slate-700 dark:text-slate-300"> {{ visibilityStr .gist.Private false }} </span>{{ end }}</h5>
                <div class="flex items-center gap-2 mb-2">
                    {{ if len .gist.Description }}
                        <h6 class="text-xs text-slate-700 dark:text-slate-300">{{ .gist.Description }}</h6>
                    {{ end }}
                    {{ if len .gist.TopicsSlice }}
                    <div class="flex flex-wrap items-center gap-1">
                        {{ range .gist.TopicsSlice }}
                        <a href="{{ $.c.ExternalUrl }}/topics/{{ . }}" class="inline-flex items-center px-2 py-0.5 rounded text-xs bg-primary-200 text-primary-900 hover:bg-primary-300 dark:bg-primary-950 dark:text-primary-200 dark:hover:bg-primary-900">{{ . }}</a>
                        {{ end }}
                    </div>
                    {{ end }}
                </div>
            </div>
        </div>
        <a href="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}" class="text-slate-700 dark:text-slate-300">
            <div class="rounded-md border border-1 border-gray-200 dark:border-gray-700 overflow-auto hover:border-primary-600">
                <div class="code overflow-auto">
                    {{ if .gist.PreviewFilename }}
                        {{ if .gist.PreviewMimeType }}
                            {{ if .gist.PreviewMimeType.IsSVG }}
                                <div class="p-8 flex justify-center">
                                    <img src="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}/raw/HEAD/{{ .gist.PreviewFilename }}" alt="{{ .gist.PreviewFilename }}" class="max-h-80 object-contain">
                                </div>
                            {{ else if .gist.PreviewMimeType.IsImage }}
                                <div class="p-8 flex justify-center">
                                    <img src="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}/raw/HEAD/{{ .gist.PreviewFilename }}" alt="{{ .gist.PreviewFilename }}" class="max-h-80 object-contain">
                                </div>
                            {{ else if .gist.PreviewMimeType.IsAudio }}
                                <div class="p-8 flex justify-center">
                                    <audio controls class="w-full max-w-lg">
                                        <source src="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}/raw/HEAD/{{ .gist.PreviewFilename }}" type="{{ .gist.PreviewMimeType.ContentType }}">
                                    </audio>
                                </div>
                            {{ else if .gist.PreviewMimeType.IsVideo }}
                                <div class="p-8 flex justify-center">
                                    <video controls class="max-h-80 max-w-full">
                                        <source src="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}/raw/HEAD/{{ .gist.PreviewFilename }}" type="{{ .gist.PreviewMimeType.ContentType }}">
                                    </video>
                                </div>
                            {{ else if .gist.PreviewMimeType.IsPDF }}
                                <div class="pdf max-h-80" data-src="{{ .c.ExternalUrl }}/{{ .gist.User.Username }}/{{ .gist.Identifier }}/raw/HEAD/{{ .gist.PreviewFilename }}"></div>
                            {{ else }}
                                <div class="pl-4 py-0.5 text-xs"><p>{{ .locale.Tr "gist.preview-non-available" }}</p></div>
                            {{ end }}
                        {{ else if .gist.Preview }}
                            {{ if isMarkdown .gist.PreviewFilename }}
                                <div class="chroma preview markdown markdown-body p-8">{{ .gist.HTML | safe }}</div>
                            {{ else }}
                                <table class="chroma table-code w-full {{ if .currentStyle }}{{ if .currentStyle.SoftWrap }}whitespace-pre-wrap{{ else }}whitespace-pre{{ end }}{{ else }}whitespace-pre{{ end }}" data-filename="{{ .gist.PreviewFilename }}" style="font-size: 0.8em; border-spacing: 0; border-collapse: collapse;">
                                    <tbody>
                                    {{ $ii := "1" }}
                                    {{ $i := toInt $ii }}
                                    {{ range $line := .gist.Lines }}

                                        <tr>
                                            <td class="select-none line-num px-4">{{$i}}</td>
                                            <td class="line-code break-all">{{ $line | safe }}</td>
                                        </tr>
                                        {{ $i = inc $i }}
                                    {{ end }}
                                    </tbody>
                                </table>
                            {{ end }}
                        {{ else }}
                            <div class="pl-4 py-0.5 text-xs"><p>{{ .locale.Tr "gist.preview-non-available" }}</p></div>
                        {{ end }}
                    {{ else }}
                        <div class="pl-4 py-0.5 text-xs"><p>{{ .locale.Tr "gist.no-content" }}</p></div>
                    {{ end }}
                </div>
            </div>
        </a>
    </div>


{{ end }}