{{ define "content" }}
<div class="space-y-6">
    <header class="space-y-1">
        <div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
            <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "gist.list.search-results" }}</h1>
            <span class="text-muted-foreground text-sm">{{ .nbHits }} {{ .locale.Tr "gist.search.found" }}</span>
        </div>
        {{ if .searchQuery }}
        <p class="text-muted-foreground flex flex-wrap items-center gap-2 text-sm">
            <span>{{ .locale.Tr "gist.list.search-for" }}</span>
            <code class="bg-muted rounded px-1.5 py-0.5 font-mono text-xs">{{ .searchQuery }}</code>
        </p>
        {{ end }}
    </header>

    {{ if ne (len .gists) 0 }}
        <div class="flex flex-col gap-6 lg:flex-row lg:items-start">
            <div class="min-w-0 flex-1 space-y-4">
                {{ range $gist := .gists }}
                    {{ template "gist" (dict "gist" $gist "c" $.c "locale" $.locale "DisableGravatar" $.DisableGravatar "currentStyle" $.currentStyle) }}
                {{ end }}
                {{ template "pagination" . }}
            </div>

            {{ if ne (len .langs) 0 }}
            <aside class="lg:order-last lg:w-48 lg:shrink-0">
                <div class="lg:sticky lg:top-20">
                    <p class="text-muted-foreground px-2 pb-2 text-xs font-semibold uppercase tracking-wide">{{ .locale.Tr "gist.search.placeholder.language" }}</p>
                    <ul class="flex flex-col gap-0.5">
                        {{ range $lang, $count := .langs }}
                        <li>
                            <a href="{{ $.c.ExternalUrl }}/-/search?q={{ addMetadataToSearchQuery $.searchQuery "language" $lang }}"
                               class="hover:bg-accent hover:text-accent-foreground flex items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm">
                                <span class="truncate">{{ $lang }}</span>
                                <span class="text-muted-foreground text-xs">{{ $count }}</span>
                            </a>
                        </li>
                        {{ end }}
                    </ul>
                </div>
            </aside>
            {{ end }}
        </div>
    {{ else }}
        <div class="text-muted-foreground flex flex-col items-center justify-center py-16 text-center">
            <svg class="size-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
            <h3 class="text-foreground mt-3 text-sm font-medium">{{ .locale.Tr "gist.search.no-results" }}</h3>
        </div>
    {{ end }}
</div>
{{ end }}