{{ define "content" }}
<div class="space-y-6">
    <header class="flex min-h-9 flex-wrap items-center justify-between gap-3">
        {{ if .fromUser }}
            <div class="flex items-center gap-3">
                {{ if not (shouldGenerateAvatar .fromUser .DisableGravatar) }}
                    <img class="size-12 rounded-md border object-cover" src="{{ avatarUrl .fromUser .DisableGravatar }}" alt="{{ .fromUser.Username }}" />
                {{ else }}
                    <svg class="size-12 rounded-md border" data-jdenticon-value="{{ .fromUser.Username }}" width="48" height="48"></svg>
                {{ end }}
                <div>
                    <h1 class="text-2xl font-bold leading-tight">{{ .fromUser.Username }}</h1>
                    <p class="text-muted-foreground text-sm">{{ .locale.Tr "gist.list.joined" }} {{ .fromUser.CreatedAt | humanTimeDiff }}</p>
                </div>
            </div>
        {{ else if eq .mode "topics" }}
            <div class="flex items-center gap-3">
                <span class="bg-muted text-muted-foreground flex size-12 items-center justify-center rounded-md border text-lg font-medium uppercase">{{ slice .topic 0 1 }}</span>
                <h1 class="text-2xl font-bold leading-tight">{{ .topic }}</h1>
            </div>
        {{ else if eq .mode "search" }}
            <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "gist.list.search-results" }}</h1>
        {{ else }}
            <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "gist.list.all" }}</h1>
        {{ end }}
    </header>

    {{ if .fromUser }}
    <!-- Tabs for a user's gists -->
    <nav class="flex gap-1 border-b" aria-label="Tabs">
        <a href="{{ .c.ExternalUrl }}/{{ .fromUser.Username }}" class="-mb-px border-b-2 px-3 py-2 text-sm font-medium {{ if eq .mode "fromUser" }}border-primary{{ else }}text-muted-foreground hover:text-foreground border-transparent{{ end }}">{{ .locale.Tr "gist.list.all" }} <span class="text-muted-foreground">{{ .countFromUser }}</span></a>
        {{ if or (ne .countLiked 0) (eq .mode "liked") }}<a href="{{ .c.ExternalUrl }}/{{ .fromUser.Username }}/-/liked" class="-mb-px border-b-2 px-3 py-2 text-sm font-medium {{ if eq .mode "liked" }}border-primary{{ else }}text-muted-foreground hover:text-foreground border-transparent{{ end }}">{{ .locale.Tr "gist.list.liked" }} <span>{{ .countLiked }}</span></a>{{ end }}
        {{ if or (ne .countForked 0) (eq .mode "forked") }}<a href="{{ .c.ExternalUrl }}/{{ .fromUser.Username }}/-/forked" class="-mb-px border-b-2 px-3 py-2 text-sm font-medium {{ if eq .mode "forked" }}border-primary{{ else }}text-muted-foreground hover:text-foreground border-transparent{{ end }}">{{ .locale.Tr "gist.list.forked" }} <span>{{ .countForked }}</span></a>{{ end }}
    </nav>
    {{ else if or (eq .mode "all") (eq .mode "all-liked") (eq .mode "all-forked") }}
    <!-- Tabs for the explore "All gists" views -->
    <nav class="flex gap-1 border-b" aria-label="Tabs">
        <a href="{{ .c.ExternalUrl }}/-/all" class="-mb-px border-b-2 px-3 py-2 text-sm font-medium {{ if eq .mode "all" }}border-primary{{ else }}text-muted-foreground hover:text-foreground border-transparent{{ end }}">{{ .locale.Tr "header.menu.all" }}</a>
        <a href="{{ .c.ExternalUrl }}/-/liked" class="-mb-px border-b-2 px-3 py-2 text-sm font-medium {{ if eq .mode "all-liked" }}border-primary{{ else }}text-muted-foreground hover:text-foreground border-transparent{{ end }}">{{ .locale.Tr "gist.list.recently-liked" }}</a>
        <a href="{{ .c.ExternalUrl }}/-/forked" class="-mb-px border-b-2 px-3 py-2 text-sm font-medium {{ if eq .mode "all-forked" }}border-primary{{ else }}text-muted-foreground hover:text-foreground border-transparent{{ end }}">{{ .locale.Tr "gist.list.recently-forked" }}</a>
    </nav>
    {{ end }}

    {{ if .sortable }}
    <!-- Filter / sort toolbar -->
    <div class="flex flex-wrap items-center gap-2">
        {{ if or (eq .mode "fromUser") (eq .mode "all") (eq .mode "topics") }}
        <form action="{{ .c.ExternalUrl }}/{{ if eq .mode "fromUser" }}{{ .fromUser.Username }}{{ else if eq .mode "topics" }}-/topics/{{ .topic }}{{ else }}-/all{{ end }}" method="GET"
              class="flex flex-1 flex-wrap items-center gap-2"
              data-gist-filter
              data-init-title="{{ .title }}" data-init-visibility="{{ .visibility }}" data-init-language="{{ .language }}" data-init-topics="{{ .topics }}">
            <div class="relative min-w-60 flex-1">
                <div data-filter-box class="border-input bg-background focus-within:ring-ring flex h-auto min-h-9 flex-wrap items-center gap-1 rounded-md border px-3 py-1 focus-within:ring-1">
                    <input type="text" data-filter-input autocomplete="off" spellcheck="false"
                           placeholder="{{ .locale.Tr "gist.search.placeholder.search" }}"
                           class="min-w-32 flex-1 border-0 bg-transparent p-0 text-sm outline-none focus:ring-0" />
                </div>
                <div data-filter-menu class="bg-popover text-popover-foreground absolute inset-x-0 top-full z-30 mt-1 hidden max-h-64 overflow-auto rounded-md border p-1 shadow-md"></div>
            </div>

            <!-- Option sources read by the filter script (never rendered). -->
            <template data-filter-options="visibility">
                <span data-value="public">{{ .locale.Tr "gist.search.placeholder.public" }}</span>
                <span data-value="unlisted">{{ .locale.Tr "gist.search.placeholder.unlisted" }}</span>
                <span data-value="private">{{ .locale.Tr "gist.search.placeholder.private" }}</span>
            </template>
            <template data-filter-options="language">
                {{ range .languages }}<span data-value="{{ .Language }}">{{ .Language }} ({{ .Count }})</span>{{ end }}
            </template>

            <input type="hidden" name="title" data-filter-hidden="title" value="{{ .title }}" />
            <input type="hidden" name="visibility" data-filter-hidden="visibility" value="{{ .visibility }}" />
            <input type="hidden" name="language" data-filter-hidden="language" value="{{ .language }}" />
            <input type="hidden" name="topics" data-filter-hidden="topics" value="{{ .topics }}" />
            <input type="hidden" name="sort" value="{{ .pagination.Sort }}" />
            <input type="hidden" name="order" value="{{ .pagination.Order }}" />

            <button type="submit" class="btn h-9 shrink-0">{{ .locale.Tr "gist.search.placeholder.search" }}</button>
        </form>
        {{ end }}

        <!-- Sort dropdown (Basecoat dropdown-menu, JS) -->
        <div class="dropdown-menu ml-auto shrink-0">
            <button type="button" id="sort-trigger" aria-haspopup="menu" aria-expanded="false" aria-controls="sort-menu" class="btn-outline">
                {{ .locale.Tr "gist.list.sort" }} : {{ .order }} {{ .sort }}
                <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
            </button>
            <div id="sort-menu" data-popover aria-hidden="true" data-side="bottom" data-align="end">
                <div role="menu" aria-labelledby="sort-trigger">
                    <a href="{{ .c.ExternalUrl }}/{{ .urlPage }}{{ .pagination.WithParams "sort" "created" "order" "desc" }}" role="menuitem">{{ .locale.Tr "gist.list.order-by-desc" }} {{ .locale.Tr "gist.list.sort-by-created" }}</a>
                    <a href="{{ .c.ExternalUrl }}/{{ .urlPage }}{{ .pagination.WithParams "sort" "created" "order" "asc" }}" role="menuitem">{{ .locale.Tr "gist.list.order-by-asc" }} {{ .locale.Tr "gist.list.sort-by-created" }}</a>
                    <a href="{{ .c.ExternalUrl }}/{{ .urlPage }}{{ .pagination.WithParams "sort" "updated" "order" "desc" }}" role="menuitem">{{ .locale.Tr "gist.list.order-by-desc" }} {{ .locale.Tr "gist.list.sort-by-updated" }}</a>
                    <a href="{{ .c.ExternalUrl }}/{{ .urlPage }}{{ .pagination.WithParams "sort" "updated" "order" "asc" }}" role="menuitem">{{ .locale.Tr "gist.list.order-by-asc" }} {{ .locale.Tr "gist.list.sort-by-updated" }}</a>
                </div>
            </div>
        </div>
    </div>
    {{ end }}

    {{ if ne (len .gists) 0 }}
        <div class="space-y-4">
            {{ range $gist := .gists }}
                {{ template "gist" (dict "gist" $gist "c" $.c "locale" $.locale "DisableGravatar" $.DisableGravatar "currentStyle" $.currentStyle) }}
            {{ end }}
        </div>
        {{ template "pagination" . }}
    {{ 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"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
            <h3 class="text-foreground mt-3 text-sm font-medium">{{ .locale.Tr "gist.list.no-gists" }}</h3>
        </div>
    {{ end }}
</div>
{{ end }}